import React, { useState } from 'react';
import { HomePage } from './pages/HomePage';
import { DetailPage } from './pages/DetailPage';
import { TrendChart, CategoryDistributionChart, StatusChart, CNQChart } from './components/Charts';
import { Tabs, TabsContent, TabsList, TabsTrigger } from './components/ui/tabs';
import { Card } from './components/ui/card';
import { Shield, Target, Clock, DollarSign, Wrench, BarChart3, Home } from 'lucide-react';

type TabType = 'home' | 'security' | 'quality' | 'delays' | 'costs' | 'maintenance' | 'charts';

function App() {
  const [activeTab, setActiveTab] = useState<TabType>('home');

  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="border-b bg-card">
        <div className="container mx-auto px-8 py-6">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-3xl font-bold">SQDC Dashboard</h1>
              <p className="text-sm text-muted-foreground mt-1">
                Safety • Quality • Delivery • Cost • Maintenance
              </p>
            </div>
            <div className="text-sm text-muted-foreground">
              {new Date().toLocaleDateString('en-US', {
                weekday: 'short',
                year: 'numeric',
                month: 'short',
                day: 'numeric'
              })}
            </div>
          </div>
        </div>
      </header>

      {/* Navigation */}
      <div className="border-b bg-background sticky top-0 z-10">
        <div className="container mx-auto px-8">
          <Tabs value={activeTab} onValueChange={(value) => setActiveTab(value as TabType)}>
            <TabsList className="h-auto bg-transparent p-0 gap-1">
              <TabsTrigger
                value="home"
                className="data-[state=active]:bg-background data-[state=active]:shadow-sm rounded-t-lg border-b-2 border-transparent data-[state=active]:border-primary gap-2 px-6 py-3"
              >
                <Home className="h-4 w-4" />
                Overview
              </TabsTrigger>
              <TabsTrigger
                value="security"
                className="data-[state=active]:bg-background data-[state=active]:shadow-sm rounded-t-lg border-b-2 border-transparent data-[state=active]:border-primary gap-2 px-6 py-3"
              >
                <Shield className="h-4 w-4" />
                Safety
              </TabsTrigger>
              <TabsTrigger
                value="quality"
                className="data-[state=active]:bg-background data-[state=active]:shadow-sm rounded-t-lg border-b-2 border-transparent data-[state=active]:border-primary gap-2 px-6 py-3"
              >
                <Target className="h-4 w-4" />
                Quality
              </TabsTrigger>
              <TabsTrigger
                value="delays"
                className="data-[state=active]:bg-background data-[state=active]:shadow-sm rounded-t-lg border-b-2 border-transparent data-[state=active]:border-primary gap-2 px-6 py-3"
              >
                <Clock className="h-4 w-4" />
                Delivery
              </TabsTrigger>
              <TabsTrigger
                value="costs"
                className="data-[state=active]:bg-background data-[state=active]:shadow-sm rounded-t-lg border-b-2 border-transparent data-[state=active]:border-primary gap-2 px-6 py-3"
              >
                <DollarSign className="h-4 w-4" />
                Cost
              </TabsTrigger>
              <TabsTrigger
                value="maintenance"
                className="data-[state=active]:bg-background data-[state=active]:shadow-sm rounded-t-lg border-b-2 border-transparent data-[state=active]:border-primary gap-2 px-6 py-3"
              >
                <Wrench className="h-4 w-4" />
                Maintenance
              </TabsTrigger>
              <TabsTrigger
                value="charts"
                className="data-[state=active]:bg-background data-[state=active]:shadow-sm rounded-t-lg border-b-2 border-transparent data-[state=active]:border-primary gap-2 px-6 py-3"
              >
                <BarChart3 className="h-4 w-4" />
                Analytics
              </TabsTrigger>
            </TabsList>

            <TabsContent value="home" className="mt-0">
              <HomePage />
            </TabsContent>

            <TabsContent value="security" className="mt-0">
              <DetailPage category="security" />
            </TabsContent>

            <TabsContent value="quality" className="mt-0">
              <DetailPage category="quality" />
            </TabsContent>

            <TabsContent value="delays" className="mt-0">
              <DetailPage category="delays" />
            </TabsContent>

            <TabsContent value="costs" className="mt-0">
              <DetailPage category="costs" />
            </TabsContent>

            <TabsContent value="maintenance" className="mt-0">
              <DetailPage category="maintenance" />
            </TabsContent>

            <TabsContent value="charts" className="mt-0">
              <div className="container mx-auto p-8 space-y-6">
                <div>
                  <h1 className="text-3xl font-bold tracking-tight">Analytics & Trends</h1>
                  <p className="text-muted-foreground">Comprehensive performance analysis</p>
                </div>
                <div className="grid gap-6 md:grid-cols-2">
                  <Card className="p-6">
                    <TrendChart />
                  </Card>
                  <Card className="p-6">
                    <CategoryDistributionChart />
                  </Card>
                  <Card className="p-6">
                    <StatusChart />
                  </Card>
                  <Card className="p-6">
                    <CNQChart />
                  </Card>
                </div>
              </div>
            </TabsContent>
          </Tabs>
        </div>
      </div>

      {/* Footer */}
      <footer className="border-t bg-card mt-12">
        <div className="container mx-auto px-8 py-6">
          <div className="flex items-center justify-between text-sm text-muted-foreground">
            <p>SQDC Dashboard - Real-time Performance Monitoring</p>
            <p>Last updated: {new Date().toLocaleTimeString('en-US', {
              hour: '2-digit',
              minute: '2-digit'
            })}</p>
          </div>
        </div>
      </footer>
    </div>
  );
}

export default App;
