"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { Target } from "lucide-react";
import { ProfileHero } from "@/components/design-system/profile-hero";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { PriorityBadge, TemperatureBadge } from "@/lib/status-badges";
import { useLocale } from "@/components/providers/locale-provider";
import { ActivityTimeline } from "@/components/timeline/activity-timeline";
import { ActivitySummaryCards } from "@/components/timeline/activity-summary-cards";
import { AiLeadScorePanel } from "@/components/ai/ai-lead-score-panel";
import { AiNextBestActionPanel } from "@/components/ai/ai-next-best-action-panel";
import { AiFollowUpPanel } from "@/components/ai/ai-follow-up-panel";

interface LeadDetailProps {
  lead: {
    _id: string;
    status: string;
    temperature: string;
    priority: string;
    source: string;
    serviceInterest?: string;
    leadScore?: number;
    aiLeadScore?: number;
    aiLeadGrade?: string;
    aiScoreReason?: string;
    notes?: string;
    companyId?: { _id?: string; nameAr?: string };
    personId?: { _id?: string; fullName?: string };
    emailReply?: { _id?: string; subject?: string; fromEmail?: string };
    classification?: { intent?: string; summary?: string };
    opportunities?: Array<{ _id: string; title: string; stage: string }>;
    tasks?: Array<{ _id: string; title: string; status: string }>;
    activities?: Array<{ _id?: string; title?: string; description?: string }>;
  };
}

export function LeadDetailClient({ lead }: LeadDetailProps) {
  const router = useRouter();
  const { locale } = useLocale();
  const [status, setStatus] = useState(lead.status);
  const [message, setMessage] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  async function updateStatus(next: string) {
    setLoading(true);
    const res = await fetch(`/api/leads/${lead._id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ status: next }),
    });
    setLoading(false);
    if (res.ok) {
      setStatus(next);
      setMessage(locale === "ar" ? "تم تحديث الحالة" : "Status updated");
      router.refresh();
    }
  }

  async function createOpportunity() {
    setLoading(true);
    const res = await fetch(`/api/leads/${lead._id}/create-opportunity`, {
      method: "POST",
    });
    const json = await res.json();
    setLoading(false);
    if (!res.ok) {
      setMessage(json.error ?? (locale === "ar" ? "فشل إنشاء الفرصة" : "Failed to create opportunity"));
      return;
    }
    router.push(`/opportunities/${json.data._id}`);
  }

  const tabs =
    locale === "ar"
      ? [
          ["overview", "نظرة عامة"],
          ["timeline", "السجل"],
          ["related", "مرتبط"],
          ["actions", "إجراءات"],
        ]
      : [
          ["overview", "Overview"],
          ["timeline", "Timeline"],
          ["related", "Related"],
          ["actions", "Actions"],
        ];

  const title = lead.companyId?.nameAr ?? lead.personId?.fullName ?? "Lead";

  return (
    <div className="space-y-6">
      <ProfileHero
        icon={Target}
        title={title}
        subtitle={lead.serviceInterest}
        badges={
          <>
            <TemperatureBadge value={lead.temperature} />
            <PriorityBadge value={lead.priority} />
            <span className="rounded-full bg-muted px-3 py-1 text-xs font-medium">{status}</span>
          </>
        }
        actions={
          lead.companyId?._id ? (
            <Button variant="outline" size="sm" asChild>
              <Link href={`/market/companies/${lead.companyId._id}`}>
                {locale === "ar" ? "الشركة" : "Company"}
              </Link>
            </Button>
          ) : null
        }
        backHref="/leads"
        backLabel={locale === "ar" ? "← العودة للعملاء" : "← Back to leads"}
      />

      <Tabs defaultValue="overview">
        <TabsList className="flex h-auto flex-wrap gap-1">
          {tabs.map(([value, label]) => (
            <TabsTrigger key={value} value={value}>
              {label}
            </TabsTrigger>
          ))}
        </TabsList>

        <TabsContent value="overview">
          <Card>
            <CardContent className="pt-6">
              <dl className="grid gap-3 text-sm md:grid-cols-2">
                <Info label={locale === "ar" ? "الشخص" : "Person"} value={lead.personId?.fullName} />
                <Info label={locale === "ar" ? "الخدمة" : "Service"} value={lead.serviceInterest} />
                <Info label={locale === "ar" ? "المصدر" : "Source"} value={lead.source} />
                <Info label={locale === "ar" ? "النقاط" : "Score"} value={String(lead.leadScore ?? 0)} />
              </dl>
              {lead.notes ? (
                <p className="mt-4 text-sm text-muted-foreground">{lead.notes}</p>
              ) : null}
            </CardContent>
          </Card>
          {lead.classification ? (
            <Card className="mt-4">
              <CardHeader>
                <CardTitle className="text-base">
                  {locale === "ar" ? "تصنيف AI" : "AI classification"}
                </CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-sm">intent: {lead.classification.intent ?? "—"}</p>
                <p className="mt-1 text-sm text-muted-foreground">
                  {lead.classification.summary ?? ""}
                </p>
              </CardContent>
            </Card>
          ) : null}
          <div className="mt-4 grid gap-4 md:grid-cols-2">
            <AiLeadScorePanel
              entityType="lead"
              entityId={lead._id}
              initialScore={lead.aiLeadScore}
              initialGrade={lead.aiLeadGrade}
              initialReason={lead.aiScoreReason}
            />
            <AiNextBestActionPanel entityType="lead" entityId={lead._id} />
          </div>
        </TabsContent>

        <TabsContent value="timeline">
          <div className="space-y-4">
            <ActivitySummaryCards leadId={lead._id} />
            <Card>
              <CardContent className="pt-6">
                <ActivityTimeline
                  leadId={lead._id}
                  noteEntityType="lead"
                  noteEntityId={lead._id}
                  showNoteForm
                />
              </CardContent>
            </Card>
          </div>
        </TabsContent>

        <TabsContent value="related">
          {lead.emailReply ? (
            <Card>
              <CardHeader>
                <CardTitle className="text-base">
                  {locale === "ar" ? "رد البريد" : "Linked reply"}
                </CardTitle>
              </CardHeader>
              <CardContent>
                <Link
                  href={`/inbox/${lead.emailReply._id}`}
                  className="text-primary hover:underline"
                >
                  {lead.emailReply.subject ?? lead.emailReply.fromEmail}
                </Link>
              </CardContent>
            </Card>
          ) : null}
          <Card className="mt-4">
            <CardHeader>
              <CardTitle className="text-base">
                {locale === "ar" ? "الفرص" : "Opportunities"}
              </CardTitle>
            </CardHeader>
            <CardContent>
              <ul className="space-y-2 text-sm">
                {(lead.opportunities ?? []).map((o) => (
                  <li key={o._id}>
                    <Link href={`/opportunities/${o._id}`} className="text-primary hover:underline">
                      {o.title} ({o.stage})
                    </Link>
                  </li>
                ))}
                {(lead.opportunities ?? []).length === 0 ? (
                  <li className="text-muted-foreground">
                    {locale === "ar" ? "لا توجد فرص" : "No opportunities"}
                  </li>
                ) : null}
              </ul>
            </CardContent>
          </Card>
          <Card className="mt-4">
            <CardHeader>
              <CardTitle className="text-base">
                {locale === "ar" ? "المهام" : "Tasks"}
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-3 text-sm">
              {(lead.tasks ?? []).map((t) => (
                <p key={t._id}>
                  {t.title} — {t.status}
                </p>
              ))}
              {(lead.tasks ?? []).length === 0 ? (
                <p className="text-muted-foreground">
                  {locale === "ar" ? "لا توجد مهام" : "No tasks"}
                </p>
              ) : null}
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="actions">
          <Card>
            <CardContent className="flex flex-wrap gap-2 pt-6">
              <Button
                type="button"
                variant="outline"
                size="sm"
                disabled={loading}
                onClick={() => void updateStatus("qualified")}
              >
                qualified
              </Button>
              <Button
                type="button"
                variant="outline"
                size="sm"
                disabled={loading}
                onClick={() => void updateStatus("contacted")}
              >
                contacted
              </Button>
              <Button type="button" size="sm" disabled={loading} onClick={() => void createOpportunity()}>
                {locale === "ar" ? "إنشاء فرصة" : "Create opportunity"}
              </Button>
            </CardContent>
          </Card>
          <div className="mt-4">
            <AiFollowUpPanel
              leadContext={[
                lead.serviceInterest,
                lead.classification?.intent,
                lead.classification?.summary,
                lead.notes,
              ]
                .filter(Boolean)
                .join(" — ")}
              companyContext={lead.companyId?.nameAr}
              subject={lead.emailReply?.subject}
              onApply={() => {
                setMessage(
                  locale === "ar"
                    ? "تم توليد الرد — انسخه من الصندوق أو أرسله يدوياً"
                    : "Reply generated — copy from inbox or send manually"
                );
              }}
            />
          </div>
          {message ? <p className="text-sm text-muted-foreground">{message}</p> : null}
        </TabsContent>
      </Tabs>
    </div>
  );
}

function Info({ label, value }: { label: string; value?: string | null }) {
  return (
    <div>
      <dt className="text-muted-foreground">{label}</dt>
      <dd className="font-medium">{value ?? "—"}</dd>
    </div>
  );
}