import { useEffect, useState } from "react";
import { Card } from "./ui/card";
import { Button } from "./ui/button";
import { Badge } from "./ui/badge";
import {
  AlertTriangle,
  Clock,
  Package,
  FileCheck,
  MessageSquare,
  ArrowRight,
  Bell,
  Camera,
  Activity,
  Loader2,
} from "lucide-react";
import { chemicalsApi, protocolsApi } from "../lib/api";
import type { ChemicalInventory, Protocol } from "../shared/types";

type Tab = "dashboard" | "inventory" | "protocol";

interface DashboardProps {
  setActiveTab: (tab: Tab) => void;
}

function daysUntil(dateStr: string): number {
  const expDate = new Date(dateStr);
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  return Math.ceil((expDate.getTime() - today.getTime()) / 86400000);
}

function timeAgo(dateStr: string): string {
  const diffMs = Date.now() - new Date(dateStr).getTime();
  const mins = Math.floor(diffMs / 60000);
  const hours = Math.floor(mins / 60);
  const days = Math.floor(hours / 24);
  if (mins < 60) return `${mins}m ago`;
  if (hours < 24) return `${hours}h ago`;
  return `${days}d ago`;
}

export function Dashboard({ setActiveTab }: DashboardProps) {
  const [chemicals, setChemicals] = useState<ChemicalInventory[]>([]);
  const [protocols, setProtocols] = useState<Protocol[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    Promise.all([chemicalsApi.list(), protocolsApi.list()])
      .then(([chems, protos]) => {
        setChemicals(chems);
        setProtocols(protos);
      })
      .finally(() => setLoading(false));
  }, []);

  if (loading) {
    return (
      <div className="flex h-full items-center justify-center p-8">
        <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
      </div>
    );
  }

  // ── Derived data ──────────────────────────────────────────────────────────

  const lowStockChems = chemicals
    .filter(c => c.percentageFull != null && c.percentageFull < 20)
    .sort((a, b) => (a.percentageFull ?? 0) - (b.percentageFull ?? 0));

  const expirationChems = chemicals
    .filter(c => c.expirationDate && daysUntil(c.expirationDate) <= 30)
    .sort((a, b) => daysUntil(a.expirationDate!) - daysUntil(b.expirationDate!));

  const analyzedProtocols = protocols.filter(p => p.analysis_results?.length);

  const stats = [
    { label: "Chemicals Tracked", value: chemicals.length, icon: Package, color: "text-[#5a9584]" },
    { label: "Low Stock (<20%)", value: lowStockChems.length, icon: AlertTriangle, color: "text-amber-600" },
    { label: "Expiring ≤30 Days", value: expirationChems.length, icon: Clock, color: "text-red-600" },
    { label: "Protocols Reviewed", value: analyzedProtocols.length, icon: FileCheck, color: "text-[#2d5a4a]" },
  ];

  // Recent activity: merge newest chemicals + protocols, take top 4
  type ActivityItem = { label: string; time: string; ts: number; type: string };
  const activity: ActivityItem[] = [
    ...chemicals
      .filter(c => c.created_at)
      .map(c => ({
        label: `Added ${c.chemicalName} to inventory`,
        time: timeAgo(c.created_at!),
        ts: new Date(c.created_at!).getTime(),
        type: "inventory",
      })),
    ...protocols.map(p => ({
      label: `${p.title} protocol ${p.analysis_results?.length ? "reviewed" : "uploaded"}`,
      time: timeAgo(p.created_at),
      ts: new Date(p.created_at).getTime(),
      type: "protocol",
    })),
  ]
    .sort((a, b) => b.ts - a.ts)
    .slice(0, 4);

  // Safety alerts derived from real data
  const expiredChems = chemicals.filter(c => c.expirationDate && daysUntil(c.expirationDate) < 0);
  const soonChems = chemicals.filter(
    c => c.expirationDate && daysUntil(c.expirationDate) >= 0 && daysUntil(c.expirationDate) <= 30
  );

  type AlertItem = { message: string; severity: "critical" | "warning" | "info" };
  const safetyAlerts: AlertItem[] = [
    ...expiredChems.map(c => ({
      message: `${c.chemicalName} expired ${Math.abs(daysUntil(c.expirationDate!))}d ago — verify disposal`,
      severity: "critical" as const,
    })),
    ...lowStockChems.slice(0, 2).map(c => ({
      message: `${c.chemicalName} is ${c.percentageFull}% full — consider reordering`,
      severity: "warning" as const,
    })),
    ...(soonChems.length > 0
      ? [{ message: `${soonChems.length} chemical${soonChems.length > 1 ? "s" : ""} expiring in the next 30 days`, severity: "warning" as const }]
      : []),
  ];

  return (
    <div className="p-8">
      <div className="max-w-7xl mx-auto">
        <div className="mb-8">
          <h1 className="text-foreground mb-2">Welcome to LabWise</h1>
          <p className="text-muted-foreground">Your AI-powered lab safety and compliance assistant</p>
        </div>

        {/* Stats Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
          {stats.map(stat => {
            const Icon = stat.icon;
            return (
              <Card key={stat.label} className="p-6">
                <div className="flex items-start justify-between">
                  <div>
                    <p className="text-muted-foreground mb-1">{stat.label}</p>
                    <p className={`text-2xl font-bold ${stat.color}`}>{stat.value}</p>
                  </div>
                  <Icon className={`w-8 h-8 ${stat.color}`} />
                </div>
              </Card>
            );
          })}
        </div>

        {/* Quick Actions */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
          <Card className="p-6">
            <div className="flex items-start gap-4 mb-4">
              <div className="p-3 bg-accent rounded-lg">
                <MessageSquare className="w-6 h-6 text-primary" />
              </div>
              <div>
                <h3 className="text-foreground mb-1">AI Safety Assistant</h3>
                <p className="text-muted-foreground">Ask questions with sourced answers</p>
              </div>
            </div>
            <Button onClick={() => setActiveTab("protocol")} className="w-full bg-primary hover:bg-primary/90">
              Ask Question <ArrowRight className="w-4 h-4 ml-2" />
            </Button>
          </Card>

          <Card className="p-6">
            <div className="flex items-start gap-4 mb-4">
              <div className="p-3 bg-accent rounded-lg">
                <FileCheck className="w-6 h-6 text-primary" />
              </div>
              <div>
                <h3 className="text-foreground mb-1">Check Protocol</h3>
                <p className="text-muted-foreground">Get AI safety feedback</p>
              </div>
            </div>
            <Button onClick={() => setActiveTab("protocol")} variant="outline" className="w-full">
              Upload Protocol <ArrowRight className="w-4 h-4 ml-2" />
            </Button>
          </Card>

          <Card className="p-6">
            <div className="flex items-start gap-4 mb-4">
              <div className="p-3 bg-accent rounded-lg">
                <Camera className="w-6 h-6 text-primary" />
              </div>
              <div>
                <h3 className="text-foreground mb-1">Scan Chemical</h3>
                <p className="text-muted-foreground">Photo capture with auto-fill</p>
              </div>
            </div>
            <Button onClick={() => setActiveTab("inventory")} variant="outline" className="w-full">
              Scan Label <Camera className="w-4 h-4 ml-2" />
            </Button>
          </Card>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
          {/* Low Stock Alerts */}
          <Card className="p-6">
            <div className="flex items-center justify-between mb-4">
              <div className="flex items-center gap-2">
                <AlertTriangle className="w-5 h-5 text-amber-600" />
                <h3 className="text-foreground">Low Stock Alerts</h3>
              </div>
              <Button variant="ghost" className="text-primary" onClick={() => setActiveTab("inventory")}>
                View All
              </Button>
            </div>
            {lowStockChems.length === 0 ? (
              <p className="text-sm text-muted-foreground py-4 text-center">No low stock items.</p>
            ) : (
              <div className="space-y-3">
                {lowStockChems.slice(0, 3).map(c => (
                  <div
                    key={c.id}
                    className="flex items-center justify-between p-3 rounded-lg border border-amber-200 bg-amber-50 hover:shadow-sm transition-shadow cursor-pointer"
                    onClick={() => setActiveTab("inventory")}
                  >
                    <div className="flex-1 min-w-0">
                      <p className="text-foreground truncate">{c.chemicalName}</p>
                      <p className="text-muted-foreground text-sm">{c.lab} · {c.storageLocation}</p>
                    </div>
                    <Badge className="ml-2 shrink-0 bg-amber-100 text-amber-700 border-amber-200">
                      {c.percentageFull}% full
                    </Badge>
                  </div>
                ))}
              </div>
            )}
          </Card>

          {/* Expiration Alerts */}
          <Card className="p-6 lg:col-span-2">
            <div className="flex items-center justify-between mb-4">
              <div className="flex items-center gap-2">
                <Bell className="w-5 h-5 text-primary" />
                <h3 className="text-foreground">Expiration Alerts</h3>
              </div>
              <Button variant="ghost" className="text-primary" onClick={() => setActiveTab("inventory")}>
                View All
              </Button>
            </div>
            {expirationChems.length === 0 ? (
              <p className="text-sm text-muted-foreground py-4 text-center">No chemicals expiring within 30 days.</p>
            ) : (
              <div className="space-y-3">
                {expirationChems.slice(0, 4).map(c => {
                  const days = daysUntil(c.expirationDate!);
                  const expired = days < 0;
                  return (
                    <div
                      key={c.id}
                      className="flex items-center justify-between p-4 rounded-lg border border-border hover:shadow-sm transition-shadow cursor-pointer"
                      onClick={() => setActiveTab("inventory")}
                    >
                      <div className="flex items-center gap-3 flex-1 min-w-0">
                        <div className={`w-2 h-2 rounded-full shrink-0 ${expired ? "bg-red-500" : "bg-amber-500"}`} />
                        <div className="min-w-0">
                          <p className="text-foreground truncate">{c.chemicalName}</p>
                          <p className="text-muted-foreground text-sm">{c.lab} · {c.storageLocation}</p>
                        </div>
                      </div>
                      <Badge className={`ml-2 shrink-0 border ${expired ? "bg-red-100 text-red-700 border-red-200" : "bg-amber-100 text-amber-700 border-amber-200"}`}>
                        <Clock className="w-3 h-3 mr-1" />
                        {expired ? `Expired ${Math.abs(days)}d ago` : `${days}d left`}
                      </Badge>
                    </div>
                  );
                })}
              </div>
            )}
          </Card>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* Recent Activity */}
          <Card className="p-6">
            <h3 className="text-foreground mb-4">Recent Activity</h3>
            {activity.length === 0 ? (
              <p className="text-sm text-muted-foreground py-4 text-center">No activity yet. Add chemicals or upload a protocol to get started.</p>
            ) : (
              <div className="space-y-4">
                {activity.map((item, idx) => (
                  <div key={idx} className="flex items-start gap-3">
                    <Activity className="w-5 h-5 text-muted-foreground mt-0.5 shrink-0" />
                    <div className="flex-1 min-w-0">
                      <p className="text-foreground truncate">{item.label}</p>
                      <p className="text-muted-foreground text-sm">{item.time}</p>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </Card>

          {/* Safety Alerts */}
          <Card className="p-6">
            <h3 className="text-foreground mb-4">Safety Alerts</h3>
            {safetyAlerts.length === 0 ? (
              <div className="flex items-start gap-3 p-3 rounded-lg bg-accent border border-border">
                <AlertTriangle className="w-5 h-5 mt-0.5 text-primary" />
                <p className="text-foreground">All clear — no active safety alerts.</p>
              </div>
            ) : (
              <div className="space-y-4">
                {safetyAlerts.map((alert, idx) => (
                  <div
                    key={idx}
                    className={`flex items-start gap-3 p-3 rounded-lg ${
                      alert.severity === "critical"
                        ? "bg-red-50 border border-red-200"
                        : "bg-amber-50 border border-amber-200"
                    }`}
                  >
                    <AlertTriangle
                      className={`w-5 h-5 mt-0.5 shrink-0 ${
                        alert.severity === "critical" ? "text-red-600" : "text-amber-600"
                      }`}
                    />
                    <p className="text-foreground flex-1">{alert.message}</p>
                  </div>
                ))}
              </div>
            )}
          </Card>
        </div>
      </div>
    </div>
  );
}