import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Badge } from "@/components/ui/badge";
import { __ } from "@wordpress/i18n";

export default function ConsentGuardApp() {
  return (
    <div className="flex min-h-screen bg-slate-50 text-slate-900">
      <aside className="w-60 border-r bg-white p-4">
        <h1 className="mb-4 text-lg font-semibold">{__("Consent Guard", "grt-consent-tool")}</h1>
        <nav className="space-y-2 text-sm">
          <button className="block w-full rounded px-3 py-2 text-left hover:bg-slate-100">{__("Banner Settings", "grt-consent-tool")}</button>
          <button className="block w-full rounded px-3 py-2 text-left hover:bg-slate-100">{__("Script Blocking", "grt-consent-tool")}</button>
          <button className="block w-full rounded px-3 py-2 text-left hover:bg-slate-100">{__("Cookie Categories", "grt-consent-tool")}</button>
          <button className="block w-full rounded px-3 py-2 text-left hover:bg-slate-100">{__("Consent Logs", "grt-consent-tool")}</button>
          <button className="block w-full rounded px-3 py-2 text-left hover:bg-slate-100">{__("Advanced", "grt-consent-tool")}</button>
        </nav>
      </aside>

      <main className="flex-1 p-6">
        <Tabs defaultValue="banner">
          <TabsList>
            <TabsTrigger value="banner">{__("Banner Settings", "grt-consent-tool")}</TabsTrigger>
            <TabsTrigger value="scripts">{__("Script Blocking", "grt-consent-tool")}</TabsTrigger>
            <TabsTrigger value="categories">{__("Cookie Categories", "grt-consent-tool")}</TabsTrigger>
            <TabsTrigger value="logs">{__("Consent Logs", "grt-consent-tool")}</TabsTrigger>
            <TabsTrigger value="advanced">{__("Advanced", "grt-consent-tool")}</TabsTrigger>
          </TabsList>

          <TabsContent value="banner" className="mt-6 space-y-6">
            <Card className="p-6">
              <h2 className="text-base font-semibold">{__("Banner Customization", "grt-consent-tool")}</h2>
              <div className="mt-4 grid gap-4 md:grid-cols-2">
                <div className="space-y-2">
                  <label className="text-sm font-medium">{__("Banner Text", "grt-consent-tool")}</label>
                  <Textarea placeholder={__("Enter banner copy", "grt-consent-tool")} />
                </div>
                <div className="space-y-2">
                  <label className="text-sm font-medium">{__("Position", "grt-consent-tool")}</label>
                  <Select>
                    <SelectTrigger>
                      <SelectValue placeholder={__("Select position", "grt-consent-tool")} />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="bottom">{__("Bottom", "grt-consent-tool")}</SelectItem>
                      <SelectItem value="top">{__("Top", "grt-consent-tool")}</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <label className="text-sm font-medium">{__("Primary Color", "grt-consent-tool")}</label>
                  <Input type="color" />
                </div>
                <div className="space-y-2">
                  <label className="text-sm font-medium">{__("Enable Sticky Icon", "grt-consent-tool")}</label>
                  <Switch />
                </div>
              </div>
            </Card>
          </TabsContent>

          <TabsContent value="scripts" className="mt-6 space-y-6">
            <Card className="p-6 space-y-4">
              <h2 className="text-base font-semibold">{__("Script Blocking Rules", "grt-consent-tool")}</h2>
              <Textarea placeholder={__("Whitelist handles (one per line)", "grt-consent-tool")} />
              <Textarea placeholder={__("Tracking patterns (domain or regex)", "grt-consent-tool")} />
              <Button>{__("Save Rules", "grt-consent-tool")}</Button>
            </Card>
          </TabsContent>

          <TabsContent value="categories" className="mt-6 space-y-6">
            <Card className="p-6">
              <h2 className="text-base font-semibold">{__("Cookie Categories", "grt-consent-tool")}</h2>
              <div className="mt-4 space-y-3">
                <div className="flex items-center justify-between">
                  <span>{__("Strictly Necessary", "grt-consent-tool")}</span>
                  <Badge>{__("Always On", "grt-consent-tool")}</Badge>
                </div>
                <div className="flex items-center justify-between">
                  <span>{__("Functional", "grt-consent-tool")}</span>
                  <Switch />
                </div>
                <div className="flex items-center justify-between">
                  <span>{__("Performance / Analytics", "grt-consent-tool")}</span>
                  <Switch />
                </div>
                <div className="flex items-center justify-between">
                  <span>{__("Marketing / Targeting", "grt-consent-tool")}</span>
                  <Switch />
                </div>
              </div>
            </Card>
          </TabsContent>

          <TabsContent value="logs" className="mt-6 space-y-6">
            <Card className="p-6">
              <div className="flex items-center justify-between">
                <h2 className="text-base font-semibold">{__("Consent Logs", "grt-consent-tool")}</h2>
                <Dialog>
                  <Button>{__("Export CSV", "grt-consent-tool")}</Button>
                  <DialogContent>
                    <DialogHeader>
                      <DialogTitle>{__("Export consent logs", "grt-consent-tool")}</DialogTitle>
                    </DialogHeader>
                    <p className="text-sm text-slate-600">{__("Download logs for audits and compliance reporting.", "grt-consent-tool")}</p>
                  </DialogContent>
                </Dialog>
              </div>
              <Table className="mt-4">
                <TableHeader>
                  <TableRow>
                    <TableHead>{__("User", "grt-consent-tool")}</TableHead>
                    <TableHead>{__("Status", "grt-consent-tool")}</TableHead>
                    <TableHead>{__("Preferences", "grt-consent-tool")}</TableHead>
                    <TableHead>{__("Date", "grt-consent-tool")}</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  <TableRow>
                    <TableCell>{__("Guest", "grt-consent-tool")}</TableCell>
                    <TableCell>{__("Accepted", "grt-consent-tool")}</TableCell>
                    <TableCell>{__("Functional, Analytics", "grt-consent-tool")}</TableCell>
                    <TableCell>{__("Just now", "grt-consent-tool")}</TableCell>
                  </TableRow>
                </TableBody>
              </Table>
            </Card>
          </TabsContent>

          <TabsContent value="advanced" className="mt-6 space-y-6">
            <Card className="p-6 space-y-4">
              <h2 className="text-base font-semibold">{__("Advanced", "grt-consent-tool")}</h2>
              <Input placeholder={__("Google Consent Mode ID", "grt-consent-tool")} />
              <Button>{__("Save Advanced Settings", "grt-consent-tool")}</Button>
            </Card>
          </TabsContent>
        </Tabs>
      </main>
    </div>
  );
}