'use client';

import { useState } from 'react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { TicketList } from '@/components/tickets/ticket-list';
import { TaskList } from '@/components/tasks/task-list';
import { CompanySelector } from '@/components/companies/company-selector';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { 
  Ticket, 
  User, 
  ListTodo, 
  Building2, 
  RefreshCw,
  Search,
  Settings,
  Plus,
  Activity,
  TrendingUp,
  Server
} from 'lucide-react';
import { ThemeToggle } from '@/components/theme-toggle';

export default function Home() {
  const [selectedCompany, setSelectedCompany] = useState<number | undefined>();
  const [selectedResource, setSelectedResource] = useState<number | undefined>();
  const [activeTab, setActiveTab] = useState('tickets');

  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-16 items-center">
          <div className="flex flex-1 items-center justify-between">
            <div className="flex items-center space-x-4">
              <div className="flex items-center space-x-3">
                <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-gradient-to-br from-blue-600 to-blue-700 text-white shadow-lg">
                  <Activity className="h-5 w-5" />
                </div>
                <div>
                  <h1 className="text-xl font-semibold tracking-tight">
                    Autotask Dashboard
                  </h1>
                  <p className="text-xs text-muted-foreground">PSA Management System</p>
                </div>
              </div>
            </div>
            <div className="flex items-center space-x-2">
              <Button variant="ghost" size="sm" asChild>
                <a href="/configuration-items">
                  <Server className="w-4 h-4 mr-2" />
                  Config Items
                </a>
              </Button>
              <Button variant="ghost" size="sm" asChild>
                <a href="/setup">
                  <Settings className="w-4 h-4 mr-2" />
                  Setup
                </a>
              </Button>
              <Button variant="ghost" size="icon" className="relative">
                <RefreshCw className="h-4 w-4" />
              </Button>
              <ThemeToggle />
              <Button size="sm" className="bg-gradient-to-r from-blue-600 to-blue-700 text-white hover:from-blue-700 hover:to-blue-800">
                <Plus className="w-4 h-4 mr-2" />
                New Ticket
              </Button>
            </div>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="container mx-auto px-4 py-8">
        {/* Filters */}
        <Card className="mb-6 border-0 shadow-lg">
          <CardHeader className="bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 rounded-t-lg">
            <div className="flex items-center justify-between">
              <div>
                <CardTitle className="text-lg">Quick Filters</CardTitle>
                <CardDescription>
                  Narrow down your view by company or resource
                </CardDescription>
              </div>
              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-white dark:bg-gray-900 shadow-sm">
                <Search className="h-4 w-4 text-muted-foreground" />
              </div>
            </div>
          </CardHeader>
          <CardContent className="pt-6">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              <CompanySelector
                value={selectedCompany}
                onValueChange={setSelectedCompany}
                label="Filter by Company"
              />
              <div className="space-y-2">
                <Label htmlFor="resource-search" className="flex items-center gap-2">
                  <User className="w-4 h-4" />
                  Filter by Resource
                </Label>
                <div className="flex space-x-2">
                  <Input
                    id="resource-search"
                    placeholder="Enter resource email..."
                    type="email"
                    className="bg-background"
                  />
                  <Button variant="secondary" size="icon">
                    <Search className="w-4 h-4" />
                  </Button>
                </div>
              </div>
              <div className="flex items-end">
                <Button 
                  variant="outline" 
                  className="w-full"
                  onClick={() => {
                    setSelectedCompany(undefined);
                    setSelectedResource(undefined);
                  }}
                >
                  <RefreshCw className="w-4 h-4 mr-2" />
                  Clear Filters
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Tabs for Tickets and Tasks */}
        <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
          <TabsList className="grid w-full grid-cols-2 max-w-md bg-muted/50">
            <TabsTrigger value="tickets" className="flex items-center gap-2 data-[state=active]:bg-background data-[state=active]:shadow-sm">
              <Ticket className="w-4 h-4" />
              Tickets
            </TabsTrigger>
            <TabsTrigger value="tasks" className="flex items-center gap-2 data-[state=active]:bg-background data-[state=active]:shadow-sm">
              <ListTodo className="w-4 h-4" />
              Tasks
            </TabsTrigger>
          </TabsList>

          <TabsContent value="tickets" className="space-y-4">
            <TicketList 
              companyId={selectedCompany} 
              resourceId={selectedResource} 
            />
          </TabsContent>

          <TabsContent value="tasks" className="space-y-4">
            <TaskList 
              resourceId={selectedResource} 
            />
          </TabsContent>
        </Tabs>

        {/* Stats Cards */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mt-8">
          <Card className="border-0 shadow-lg bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-950 dark:to-blue-900">
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">
                Open Tickets
              </CardTitle>
              <div className="h-8 w-8 rounded-full bg-blue-600/10 flex items-center justify-center">
                <Ticket className="h-4 w-4 text-blue-600" />
              </div>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">-</div>
              <div className="flex items-center text-xs text-muted-foreground mt-1">
                <TrendingUp className="h-3 w-3 mr-1 text-green-600" />
                <span>12% from last month</span>
              </div>
            </CardContent>
          </Card>
          <Card className="border-0 shadow-lg bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-950 dark:to-purple-900">
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">
                Active Tasks
              </CardTitle>
              <div className="h-8 w-8 rounded-full bg-purple-600/10 flex items-center justify-center">
                <ListTodo className="h-4 w-4 text-purple-600" />
              </div>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">-</div>
              <div className="flex items-center text-xs text-muted-foreground mt-1">
                <Activity className="h-3 w-3 mr-1 text-orange-600" />
                <span>In progress</span>
              </div>
            </CardContent>
          </Card>
          <Card className="border-0 shadow-lg bg-gradient-to-br from-green-50 to-green-100 dark:from-green-950 dark:to-green-900">
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">
                Companies
              </CardTitle>
              <div className="h-8 w-8 rounded-full bg-green-600/10 flex items-center justify-center">
                <Building2 className="h-4 w-4 text-green-600" />
              </div>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">-</div>
              <div className="flex items-center text-xs text-muted-foreground mt-1">
                <User className="h-3 w-3 mr-1" />
                <span>Active clients</span>
              </div>
            </CardContent>
          </Card>
          <Card className="border-0 shadow-lg bg-gradient-to-br from-orange-50 to-orange-100 dark:from-orange-950 dark:to-orange-900">
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">
                Response Time
              </CardTitle>
              <div className="h-8 w-8 rounded-full bg-orange-600/10 flex items-center justify-center">
                <Activity className="h-4 w-4 text-orange-600" />
              </div>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">2.4h</div>
              <div className="flex items-center text-xs text-muted-foreground mt-1">
                <TrendingUp className="h-3 w-3 mr-1 text-green-600" />
                <span>15% faster</span>
              </div>
            </CardContent>
          </Card>
        </div>
      </main>
    </div>
  );
}