import { useState } from 'react';
import { InboxIcon, InfoIcon } from 'lucide-react';
import { toast } from 'sonner';

import { StatusCard } from '../../components/copilot/thread/StatusCard';
import { Badge } from '../../components/ui/badge';
import { Button } from '../../components/ui/button';
import { Callout } from '../../components/ui/callout';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '../../components/ui/card';
import { Checkbox } from '../../components/ui/checkbox';
import ConfirmDialog from '../../components/ui/confirm-dialog';
import { DatePicker } from '../../components/ui/date-picker';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '../../components/ui/dialog';
import EmptyState from '../../components/ui/empty-state';
import { Input } from '../../components/ui/input';
import { Label } from '../../components/ui/label';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '../../components/ui/popover';
import { Progress } from '../../components/ui/progress';
import SearchableSelect from '../../components/ui/searchable-select';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '../../components/ui/select';
import { Separator } from '../../components/ui/separator';
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '../../components/ui/sheet';
import { Switch } from '../../components/ui/switch';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '../../components/ui/table';
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from '../../components/ui/tabs';
import { Textarea } from '../../components/ui/textarea';
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from '../../components/ui/tooltip';

const COUNTRIES = [
  { label: 'Romania', value: 'ro' },
  { label: 'Germany', value: 'de' },
  { label: 'United States', value: 'us' },
];

const Section = ({
  title,
  children,
}: {
  title: string;
  children: React.ReactNode;
}): JSX.Element => (
  <section className="flex flex-col gap-3">
    <h2 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
      {title}
    </h2>
    <div className="flex flex-wrap items-center gap-3">{children}</div>
  </section>
);

/** Every design-system component on one page, for side-by-side checks against custom-platform. */
const UiKitchenSink = (): JSX.Element => {
  const [confirmOpen, setConfirmOpen] = useState(false);
  const [country, setCountry] = useState('ro');
  const [date, setDate] = useState<Date | undefined>();

  return (
    <div className="mx-auto flex w-full max-w-5xl flex-col gap-10 px-6 py-10 @2xl:px-10">
      <div>
        <h1 className="text-2xl font-semibold tracking-tight text-foreground">
          UI kitchen sink
        </h1>
        <p className="text-sm text-muted-foreground">
          The components copied from custom-platform, rendered inside wp-admin.
        </p>
      </div>

      <Section title="Buttons">
        <Button>Default</Button>
        <Button variant="outline">Outline</Button>
        <Button variant="secondary">Secondary</Button>
        <Button variant="ghost">Ghost</Button>
        <Button variant="destructive">Destructive</Button>
        <Button variant="link">Link</Button>
        <Button size="xs">Extra small</Button>
        <Button size="sm">Small</Button>
        <Button size="lg">Large</Button>
        <Button disabled>Disabled</Button>
        <Button
          onClick={() =>
            toast.success('Saved', { description: 'A toast from sonner.' })
          }
        >
          Toast
        </Button>
      </Section>

      <Section title="Badges">
        <Badge>Default</Badge>
        <Badge variant="secondary">Secondary</Badge>
        <Badge variant="destructive">Destructive</Badge>
        <Badge variant="outline">Outline</Badge>
        <Badge variant="ghost">Ghost</Badge>
      </Section>

      <Section title="Callouts">
        <div className="flex w-full flex-col gap-2">
          <Callout tone="info">Info: something worth knowing.</Callout>
          <Callout tone="success">Success: it worked.</Callout>
          <Callout tone="warning">Warning: check this first.</Callout>
          <Callout tone="danger">Danger: this cannot be undone.</Callout>
          <Callout tone="brand">Brand: a Recomaze note.</Callout>
        </div>
      </Section>

      <Section title="Form fields">
        <div className="grid w-full gap-4 @2xl:grid-cols-2">
          <div className="flex flex-col gap-2">
            <Label htmlFor="sink-title">SEO title</Label>
            <Input id="sink-title" placeholder="%title% %sep% %sitename%" />
          </div>
          <div className="flex flex-col gap-2">
            <Label htmlFor="sink-select">Robots</Label>
            <Select defaultValue="index">
              <SelectTrigger id="sink-select">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="index">Index</SelectItem>
                <SelectItem value="noindex">No index</SelectItem>
                <SelectItem value="nofollow">No follow</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div className="flex flex-col gap-2">
            <Label htmlFor="sink-description">Meta description</Label>
            <Textarea
              id="sink-description"
              placeholder="Up to 155 characters."
            />
          </div>
          <div className="flex flex-col gap-2">
            <Label>Country</Label>
            <SearchableSelect
              value={country}
              onChange={setCountry}
              options={COUNTRIES}
              placeholder="Pick a country"
            />
            <DatePicker
              value={date}
              onChange={setDate}
              placeholder="Publish on"
            />
          </div>
          <div className="flex items-center gap-6">
            <label className="flex items-center gap-2 text-sm text-foreground">
              <Checkbox defaultChecked /> Exclude from sitemap
            </label>
            <label className="flex items-center gap-2 text-sm text-foreground">
              <Switch defaultChecked /> Pillar content
            </label>
          </div>
          <Progress value={64} />
        </div>
      </Section>

      <Section title="Overlays">
        <Dialog>
          <DialogTrigger render={<Button variant="outline" />}>
            Dialog
          </DialogTrigger>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Import from Rank Math</DialogTitle>
              <DialogDescription>
                Titles, descriptions, focus keywords and robots for every post.
              </DialogDescription>
            </DialogHeader>
            <DialogFooter>
              <Button>Import</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
        <Sheet>
          <SheetTrigger render={<Button variant="outline" />}>
            Sheet
          </SheetTrigger>
          <SheetContent>
            <SheetHeader>
              <SheetTitle>Redirect</SheetTitle>
              <SheetDescription>Edit the rule in place.</SheetDescription>
            </SheetHeader>
          </SheetContent>
        </Sheet>
        <Popover>
          <PopoverTrigger render={<Button variant="outline" />}>
            Popover
          </PopoverTrigger>
          <PopoverContent className="text-sm">
            Anchored to its trigger, rendered in the portal.
          </PopoverContent>
        </Popover>
        <Tooltip>
          <TooltipTrigger render={<Button variant="ghost" size="icon" />}>
            <InfoIcon />
          </TooltipTrigger>
          <TooltipContent>A tooltip.</TooltipContent>
        </Tooltip>
        <Button variant="destructive" onClick={() => setConfirmOpen(true)}>
          Confirm dialog
        </Button>
        <ConfirmDialog
          open={confirmOpen}
          onOpenChange={setConfirmOpen}
          title="Delete this redirect?"
          description="Visitors of the old URL will get a 404 again."
          confirmLabel="Delete"
          tone="destructive"
          onConfirm={() => setConfirmOpen(false)}
        />
      </Section>

      <Section title="Tabs, cards and tables">
        <Tabs defaultValue="general" className="w-full">
          <TabsList>
            <TabsTrigger value="general">General</TabsTrigger>
            <TabsTrigger value="advanced">Advanced</TabsTrigger>
            <TabsTrigger value="social">Social</TabsTrigger>
          </TabsList>
          <TabsContent value="general">
            <Card>
              <CardHeader>
                <CardTitle>Snippet preview</CardTitle>
                <CardDescription>How the page reads in Google.</CardDescription>
              </CardHeader>
              <CardContent>
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Page</TableHead>
                      <TableHead>Score</TableHead>
                      <TableHead>Focus keyword</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    <TableRow>
                      <TableCell>Hoodie with Logo</TableCell>
                      <TableCell>82</TableCell>
                      <TableCell>hoodie</TableCell>
                    </TableRow>
                    <TableRow>
                      <TableCell>Beanie</TableCell>
                      <TableCell>41</TableCell>
                      <TableCell>-</TableCell>
                    </TableRow>
                  </TableBody>
                </Table>
              </CardContent>
            </Card>
          </TabsContent>
          <TabsContent value="advanced">
            <Separator className="my-4" />
            <EmptyState
              icon={InboxIcon}
              title="Nothing here yet"
              description="Redirects you add will show up in this list."
            />
          </TabsContent>
          <TabsContent value="social">
            <p className="text-sm text-muted-foreground">Social tab.</p>
          </TabsContent>
        </Tabs>
      </Section>

      <Section title="Copilot status cards">
        <div className="flex w-full flex-col gap-3">
          <StatusCard
            tone="working"
            title="Generating product content"
            detail="We'll email you the result when it's ready."
          />
          <StatusCard
            tone="done"
            title="Scan complete"
            detail="Your score, competitors and prompt results are up to date."
            action={{ label: 'See the results', onClick: () => undefined }}
          />
          <StatusCard
            tone="quiet"
            title="Nothing new to show"
            detail="The read finished without anything to add, or is taking longer than usual."
            action={{ label: 'Open Company ID', onClick: () => undefined }}
          />
          <StatusCard
            tone="failed"
            title="Did not finish"
            detail="The piece could not be written. Ask me to try it again."
            action={{ label: 'See your content', onClick: () => undefined }}
          />
        </div>
      </Section>
    </div>
  );
};

export default UiKitchenSink;