'use client';

import {
  ArrowUp,
  Beaker,
  BookOpen,
  Database,
  Dna,
  FileText,
  Search,
  Sparkles,
  Zap,
} from 'lucide-react';
import Link from 'next/link';

import { SectionHeader } from '@/components/page-header';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';

export default function Home() {
  return (
    <div className="animate-in fade-in space-y-8 duration-500">
      <div className="flex flex-col gap-6 lg:flex-row">
        <div className="from-primary/10 via-background to-background flex-1 rounded-2xl border bg-linear-to-br p-8">
          <Badge variant="secondary" className="mb-4">
            New • BioFlow 2.0
          </Badge>
          <h1 className="mb-4 text-4xl font-bold tracking-tight">
            AI-Powered Drug Discovery
          </h1>
          <p className="text-muted-foreground mb-6 max-w-xl text-lg">
            Run discovery pipelines, predict binding, and surface evidence in
            one streamlined workspace.
          </p>
          <div className="mb-6 flex gap-2">
            <Badge
              variant="outline"
              className="bg-primary/5 border-primary/20 text-primary"
            >
              Model-aware search
            </Badge>
            <Badge
              variant="outline"
              className="border-green-500/20 bg-green-500/10 text-green-700 dark:text-green-400"
            >
              Evidence-linked
            </Badge>
            <Badge
              variant="outline"
              className="border-amber-500/20 bg-amber-500/10 text-amber-700 dark:text-amber-400"
            >
              Fast iteration
            </Badge>
          </div>

          <div className="flex gap-4">
            <Link href="/dashboard/discovery">
              <Button size="lg" className="font-semibold">
                Start Discovery
              </Button>
            </Link>
            <Link href="/dashboard/explorer">
              <Button size="lg" variant="outline">
                Explore Data
              </Button>
            </Link>
          </div>
        </div>

        <div className="lg:w-[350px]">
          <Card className="h-full">
            <CardContent className="flex h-full flex-col justify-between p-6">
              <div>
                <div className="text-muted-foreground mb-2 text-xs font-bold tracking-wider uppercase">
                  Today
                </div>
                <div className="mb-2 text-4xl font-bold">156 Discoveries</div>
                <div className="flex items-center gap-1 text-sm font-medium text-green-600">
                  <ArrowUp className="h-4 w-4" />
                  +12% vs last week
                </div>
              </div>

              <Separator className="my-4" />

              <div className="space-y-2">
                <div className="flex items-center justify-between text-sm">
                  <span className="flex items-center gap-2">
                    <span className="bg-primary h-2 w-2 rounded-full"></span>
                    Discovery
                  </span>
                  <span className="font-mono font-medium">64</span>
                </div>
                <div className="flex items-center justify-between text-sm">
                  <span className="flex items-center gap-2">
                    <span className="h-2 w-2 rounded-full bg-green-500"></span>
                    Prediction
                  </span>
                  <span className="font-mono font-medium">42</span>
                </div>
                <div className="flex items-center justify-between text-sm">
                  <span className="flex items-center gap-2">
                    <span className="h-2 w-2 rounded-full bg-amber-500"></span>
                    Evidence
                  </span>
                  <span className="font-mono font-medium">50</span>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>

      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
        {[
          {
            label: 'Molecules',
            value: '12.5M',
            icon: <Beaker className="h-5 w-5 text-blue-500" />,
            change: '+2.3%',
          },
          {
            label: 'Proteins',
            value: '847K',
            icon: <Dna className="h-5 w-5 text-cyan-500" />,
            change: '+1.8%',
          },
          {
            label: 'Papers',
            value: '1.2M',
            icon: <BookOpen className="h-5 w-5 text-emerald-500" />,
            change: '+5.2%',
          },
          {
            label: 'Discoveries',
            value: '156',
            icon: <Sparkles className="h-5 w-5 text-amber-500" />,
            change: '+12%',
          },
        ].map((metric, i) => (
          <Card key={i}>
            <CardContent className="p-6">
              <div className="mb-2 flex items-start justify-between">
                <div className="text-muted-foreground text-sm font-medium">
                  {metric.label}
                </div>
                <div className="text-lg">{metric.icon}</div>
              </div>
              <div className="mb-1 text-2xl font-bold">{metric.value}</div>
              <div className="flex items-center gap-1 text-xs font-medium text-green-500">
                <ArrowUp className="h-3 w-3" />
                {metric.change}
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      <div className="pt-4">
        <SectionHeader
          title="Quick Actions"
          icon={<Zap className="h-5 w-5 text-amber-500" />}
        />

        <div className="grid grid-cols-1 gap-4 md:grid-cols-4">
          <Link href="/discovery" className="block">
            <Card className="hover:bg-accent/50 h-full cursor-pointer transition-colors">
              <CardContent className="flex flex-col items-center gap-3 p-6 text-center">
                <div className="bg-primary/10 text-primary flex h-10 w-10 items-center justify-center rounded-full">
                  <Search className="h-5 w-5" />
                </div>
                <div>
                  <div className="font-semibold">New Discovery</div>
                  <div className="text-muted-foreground text-sm">
                    Start a pipeline
                  </div>
                </div>
              </CardContent>
            </Card>
          </Link>
          <Link href="/explorer" className="block">
            <Card className="hover:bg-accent/50 h-full cursor-pointer transition-colors">
              <CardContent className="flex flex-col items-center gap-3 p-6 text-center">
                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-blue-500/10 text-blue-500">
                  <Database className="h-5 w-5" />
                </div>
                <div>
                  <div className="font-semibold">Browse Data</div>
                  <div className="text-muted-foreground text-sm">
                    Explore datasets
                  </div>
                </div>
              </CardContent>
            </Card>
          </Link>
          <Link href="/data" className="block">
            <Card className="hover:bg-accent/50 h-full cursor-pointer transition-colors">
              <CardContent className="flex flex-col items-center gap-3 p-6 text-center">
                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-purple-500/10 text-purple-500">
                  <FileText className="h-5 w-5" />
                </div>
                <div>
                  <div className="font-semibold">Training</div>
                  <div className="text-muted-foreground text-sm">
                    Train new models
                  </div>
                </div>
              </CardContent>
            </Card>
          </Link>
          <Link href="/settings" className="block">
            <Card className="hover:bg-accent/50 h-full cursor-pointer transition-colors">
              <CardContent className="flex flex-col items-center gap-3 p-6 text-center">
                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-slate-500/10 text-slate-500">
                  <Sparkles className="h-5 w-5" />
                </div>
                <div>
                  <div className="font-semibold">View Insights</div>
                  <div className="text-muted-foreground text-sm">
                    Check predictions
                  </div>
                </div>
              </CardContent>
            </Card>
          </Link>
        </div>
      </div>
    </div>
  );
}