"use client";

import { Edit2, Eye, Flame, Star } from "lucide-react";
import { useState } from "react";
import { toast } from "sonner";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { ARCHETYPES } from "@/data/archetypes";
import type { Archetype } from "@/types/novalife";

const GLP1_RELEVANCE_STYLES: Record<string, string> = {
  high: "bg-red-50 text-red-700 border-red-200",
  medium: "bg-amber-50 text-amber-700 border-amber-200",
  low: "bg-gray-50 text-gray-500 border-gray-200",
};

function EditArchetypeDialog({
  archetype,
  open,
  onClose,
}: {
  archetype: Archetype;
  open: boolean;
  onClose: () => void;
}) {
  return (
    <Dialog open={open} onOpenChange={onClose}>
      <DialogContent className="max-w-2xl max-h-[85vh] overflow-y-auto">
        <DialogHeader>
          <div className="flex items-center gap-3">
            <div className="h-8 w-8 rounded-full" style={{ backgroundColor: archetype.color }} />
            <DialogTitle>Edit: {archetype.name}</DialogTitle>
          </div>
        </DialogHeader>

        <div className="space-y-5">
          {/* Basic fields */}
          <div className="grid grid-cols-2 gap-4">
            <div>
              <Label className="text-xs">Name</Label>
              <Input defaultValue={archetype.name} className="mt-1 text-sm" />
            </div>
            <div>
              <Label className="text-xs">Tagline</Label>
              <Input defaultValue={archetype.tagline} className="mt-1 text-sm" />
            </div>
          </div>

          <div>
            <Label className="text-xs">Description</Label>
            <Textarea defaultValue={archetype.description} className="mt-1 text-sm resize-none" rows={4} />
          </div>

          {/* Traits */}
          <div>
            <Label className="text-xs text-gray-500 mb-2 block">Traits ({archetype.traits.length})</Label>
            <div className="space-y-2">
              {archetype.traits.map((trait, i) => (
                <Input key={i} defaultValue={trait} className="text-sm" />
              ))}
            </div>
          </div>

          {/* Recommendations */}
          <div>
            <Label className="text-xs text-gray-500 mb-2 block">Starter Recommendations</Label>
            <div className="space-y-2">
              {archetype.recommendations.starter.map((rec, i) => (
                <div key={i} className="flex items-start gap-2">
                  <span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-teal-600" />
                  <Input defaultValue={rec} className="text-sm" />
                </div>
              ))}
            </div>
          </div>

          <div>
            <Label className="text-xs text-gray-500 mb-2 block">Advanced Recommendations</Label>
            <div className="space-y-2">
              {archetype.recommendations.advanced.map((rec, i) => (
                <div key={i} className="flex items-start gap-2">
                  <span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-amber-500" />
                  <Input defaultValue={rec} className="text-sm" />
                </div>
              ))}
            </div>
          </div>

          <div>
            <Label className="text-xs text-gray-500 mb-2 block">Professional Recommendations</Label>
            <div className="space-y-2">
              {archetype.recommendations.professional.map((rec, i) => (
                <div key={i} className="flex items-start gap-2">
                  <span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-violet-600" />
                  <Input defaultValue={rec} className="text-sm" />
                </div>
              ))}
            </div>
          </div>
        </div>

        <DialogFooter>
          <Button variant="outline" size="sm" onClick={onClose}>Cancel</Button>
          <Button
            size="sm"
            className="bg-teal-700 hover:bg-teal-800 text-white"
            onClick={() => {
              toast.success("Saved (PoC mode — not persisted)", { description: `${archetype.name} changes would be saved in production.` });
              onClose();
            }}
          >
            Save Changes
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

export default function ArchetypesPage() {
  const [editingArchetype, setEditingArchetype] = useState<Archetype | null>(null);

  return (
    <div className="space-y-6 p-6">
      {/* Header */}
      <div>
        <h1 className="text-2xl font-bold text-gray-900">Archetype Management</h1>
        <p className="text-sm text-gray-500">
          Manage the 6 metabolic archetypes — descriptions, traits, and recommendations
        </p>
      </div>

      {/* Stats */}
      <div className="flex flex-wrap gap-3">
        <div className="flex items-center gap-2 rounded-lg border border-gray-100 bg-white px-4 py-2.5 shadow-sm text-sm">
          <span className="text-gray-500">Total Archetypes:</span>
          <strong className="text-gray-900">6</strong>
        </div>
        <div className="flex items-center gap-2 rounded-lg border border-red-100 bg-white px-4 py-2.5 shadow-sm text-sm">
          <Flame className="h-4 w-4 text-red-500" />
          <span className="text-gray-500">High GLP-1:</span>
          <strong className="text-red-600">{ARCHETYPES.filter(a => a.glp1Relevance === "high").length}</strong>
        </div>
        <div className="flex items-center gap-2 rounded-lg border border-amber-100 bg-white px-4 py-2.5 shadow-sm text-sm">
          <Star className="h-4 w-4 text-amber-500" />
          <span className="text-gray-500">Medium GLP-1:</span>
          <strong className="text-amber-600">{ARCHETYPES.filter(a => a.glp1Relevance === "medium").length}</strong>
        </div>
      </div>

      {/* Archetype Grid */}
      <div className="grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3">
        {ARCHETYPES.map((archetype) => (
          <Card key={archetype.id} className="overflow-hidden shadow-sm hover:shadow-md transition-shadow">
            {/* Color header */}
            <div className="h-2" style={{ backgroundColor: archetype.color }} />

            <CardHeader className="pb-3 pt-4">
              <div className="flex items-start justify-between gap-3">
                <div className="flex items-center gap-3">
                  <div
                    className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl text-white text-lg font-bold"
                    style={{ backgroundColor: archetype.color }}
                  >
                    {archetype.name.split(" ").filter(w => !["The"].includes(w)).map(w => w[0]).join("").slice(0, 2)}
                  </div>
                  <div>
                    <h3 className="font-bold text-gray-900 text-sm leading-snug">{archetype.name}</h3>
                    <p className="text-xs text-gray-400 mt-0.5 italic">{archetype.tagline}</p>
                  </div>
                </div>
                <Badge
                  className={`shrink-0 text-[10px] border ${GLP1_RELEVANCE_STYLES[archetype.glp1Relevance]}`}
                >
                  GLP-1: {archetype.glp1Relevance}
                </Badge>
              </div>
            </CardHeader>

            <CardContent className="space-y-4">
              <p className="text-xs text-gray-500 line-clamp-2">{archetype.description}</p>

              <div>
                <p className="mb-1.5 text-[10px] font-semibold uppercase tracking-wide text-gray-400">
                  Key Traits ({archetype.traits.length})
                </p>
                <div className="space-y-1">
                  {archetype.traits.slice(0, 3).map((trait) => (
                    <div key={trait} className="flex items-start gap-1.5">
                      <span className="mt-1.5 h-1 w-1 shrink-0 rounded-full" style={{ backgroundColor: archetype.color }} />
                      <span className="text-xs text-gray-600 line-clamp-1">{trait}</span>
                    </div>
                  ))}
                  {archetype.traits.length > 3 && (
                    <p className="text-[10px] text-gray-400 pl-2.5">+{archetype.traits.length - 3} more traits</p>
                  )}
                </div>
              </div>

              <div className="flex items-center justify-between rounded-lg bg-gray-50 px-3 py-2 text-xs">
                <span className="text-gray-500">Prevalence</span>
                <div className="flex items-center gap-2">
                  <div className="h-1.5 w-16 rounded-full bg-gray-200">
                    <div
                      className="h-1.5 rounded-full"
                      style={{ width: `${archetype.prevalence * 3}%`, backgroundColor: archetype.color }}
                    />
                  </div>
                  <span className="font-semibold text-gray-700">{archetype.prevalence}%</span>
                </div>
              </div>

              <div className="flex gap-2">
                <Button
                  size="sm"
                  variant="outline"
                  className="flex-1 gap-2 text-xs"
                  onClick={() => setEditingArchetype(archetype)}
                >
                  <Edit2 className="h-3.5 w-3.5" />
                  Edit
                </Button>
                <Button
                  size="sm"
                  variant="outline"
                  className="flex-1 gap-2 text-xs"
                  onClick={() => toast.info("In PoC mode — report preview navigation simulated")}
                >
                  <Eye className="h-3.5 w-3.5" />
                  Preview
                </Button>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      {editingArchetype && (
        <EditArchetypeDialog
          archetype={editingArchetype}
          open={!!editingArchetype}
          onClose={() => setEditingArchetype(null)}
        />
      )}
    </div>
  );
}