"use client";

import { useState } from "react";
import Link from "next/link";
import { ExternalLink, RefreshCw, Share2, Shield, Sparkles, TrendingUp, Users } from "lucide-react";
import { analyzeSocialMedia } from "@/lib/social-media-analysis";
import { saveBusiness } from "@/lib/data-store";
import type { Business, SocialMediaAnalysis, SocialPlatform } from "@/lib/types";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { ScoreRing } from "@/components/ui/score-ring";

const platformLabels: Record<SocialPlatform, string> = {
  instagram: "Instagram",
  facebook: "Facebook",
  linkedin: "LinkedIn",
  tiktok: "TikTok",
  google: "Google Business",
  youtube: "YouTube",
  x: "X",
};

const priorityStyles = {
  high: "border-amber-500/30 bg-amber-500/10 text-amber-300",
  medium: "border-sky-500/30 bg-sky-500/10 text-sky-300",
  low: "border-slate-700 bg-slate-800/50 text-slate-400",
};

interface SocialMediaAnalysisPanelProps {
  business: Business;
  onUpdate?: (business: Business) => void;
  variant?: "compact" | "full";
}

export function SocialMediaAnalysisPanel({ business, onUpdate, variant = "full" }: SocialMediaAnalysisPanelProps) {
  const [analysis, setAnalysis] = useState<SocialMediaAnalysis | null>(business.socialMediaAnalysis ?? null);
  const [running, setRunning] = useState(false);

  const runAnalysis = async () => {
    setRunning(true);
    try {
      const result = analyzeSocialMedia(business);
      const next = { ...business, socialMediaAnalysis: result, updatedAt: new Date().toISOString() };
      setAnalysis(result);
      await saveBusiness(next);
      onUpdate?.(next);
    } finally {
      setRunning(false);
    }
  };

  if (variant === "compact" && !analysis) {
    return (
      <Card className="border-indigo-500/20">
        <CardHeader className="pb-2">
          <CardTitle className="flex items-center gap-2 text-sm">
            <Share2 className="h-4 w-4 text-indigo-400" />
            Social media analysis
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-3 text-sm">
          <p className="text-slate-400">
            Score visibility, who gets picked vs competitors, and whether your website or social builds more trust.
          </p>
          <Button size="sm" className="gap-2" onClick={runAnalysis} disabled={running}>
            <Sparkles className="h-3.5 w-3.5" />
            {running ? "Analyzing…" : "Analyze social"}
          </Button>
        </CardContent>
      </Card>
    );
  }

  if (variant === "compact" && analysis) {
    return (
      <Card className="border-indigo-500/20">
        <CardHeader className="pb-2">
          <CardTitle className="flex items-center justify-between gap-2 text-sm">
            <span className="flex items-center gap-2">
              <Share2 className="h-4 w-4 text-indigo-400" />
              Social visibility
            </span>
            <ScoreRing score={analysis.visibilityScore} size={48} />
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-2 text-xs">
          <p className="text-slate-400">
            Picked <span className="text-indigo-300">{analysis.yourPickSharePercent}%</span> vs competitors · Trust:{" "}
            {analysis.trust.strongerChannel === "website" ? "website leads" : analysis.trust.strongerChannel === "social" ? "social leads" : "balanced"}
          </p>
          <div className="flex flex-wrap gap-2">
            <Button size="sm" variant="outline" className="gap-1.5" onClick={runAnalysis} disabled={running}>
              <RefreshCw className="h-3 w-3" />
              Re-run
            </Button>
            <Link href="/profile#social-analysis" className="self-center text-sky-400 hover:text-sky-300">
              Full analysis →
            </Link>
          </div>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card id="social-analysis" className="scroll-mt-6 border-indigo-500/20">
      <CardHeader>
        <div className="flex flex-wrap items-start justify-between gap-4">
          <div>
            <CardTitle className="flex items-center gap-2">
              <Share2 className="h-5 w-5 text-indigo-400" />
              Social media analysis
            </CardTitle>
            <p className="mt-1 text-sm text-slate-400">
              Scores brand visibility, simulates who buyers pick vs competitors, and compares trust from your website vs social channels.
            </p>
          </div>
          <Button className="gap-2 shrink-0" onClick={runAnalysis} disabled={running}>
            {running ? (
              <>
                <RefreshCw className="h-4 w-4 animate-spin" />
                Analyzing…
              </>
            ) : analysis ? (
              <>
                <RefreshCw className="h-4 w-4" />
                Re-run analysis
              </>
            ) : (
              <>
                <Sparkles className="h-4 w-4" />
                Analyze social media
              </>
            )}
          </Button>
        </div>
      </CardHeader>
      <CardContent className="space-y-6">
        {!analysis ? (
          <div className="rounded-xl border border-dashed border-slate-700 p-8 text-center text-sm text-slate-400">
            Run analysis to see visibility scores, competitor pick-share %, and whether your website or social media creates stronger trust.
          </div>
        ) : (
          <>
            <div className="grid gap-4 md:grid-cols-[140px_1fr]">
              <div className="flex flex-col items-center gap-3">
                <ScoreRing score={analysis.visibilityScore} label="Visibility" />
                <p className="text-center text-xs text-slate-500">Leaders ~{analysis.industryVisibilityBenchmark}/100</p>
              </div>
              <div className="space-y-3">
                <p className="text-sm text-slate-300">{analysis.executiveSummary}</p>
                <Badge className="border-indigo-500/30 bg-indigo-500/10 text-indigo-300">
                  Your pick share: {analysis.yourPickSharePercent}%
                </Badge>
              </div>
            </div>

            <div>
              <p className="mb-3 flex items-center gap-2 text-xs uppercase text-slate-500">
                <Users className="h-3.5 w-3.5" />
                Who buyers pick (simulated comparison)
              </p>
              <div className="space-y-2">
                {analysis.pickShare.map((entry) => (
                  <div
                    key={entry.name}
                    className={`rounded-xl border p-3 ${entry.isYou ? "border-indigo-500/30 bg-indigo-500/5" : "border-slate-800"}`}
                  >
                    <div className="flex flex-wrap items-center justify-between gap-2">
                      <p className="font-medium text-slate-100">
                        {entry.name}
                        {entry.isYou ? <span className="ml-2 text-xs text-indigo-300">You</span> : null}
                      </p>
                      <span className="text-lg font-bold text-indigo-300">{entry.pickSharePercent}%</span>
                    </div>
                    <div className="mt-2 h-2 overflow-hidden rounded-full bg-slate-800">
                      <div
                        className={`h-full rounded-full ${entry.isYou ? "bg-indigo-500" : "bg-slate-600"}`}
                        style={{ width: `${entry.pickSharePercent}%` }}
                      />
                    </div>
                    <p className="mt-2 text-xs text-slate-500">{entry.reason}</p>
                  </div>
                ))}
              </div>
            </div>

            <div>
              <p className="mb-3 flex items-center gap-2 text-xs uppercase text-slate-500">
                <Shield className="h-3.5 w-3.5" />
                Trust: website vs social
              </p>
              <div className="grid gap-3 md:grid-cols-2">
                <div className="rounded-xl border border-sky-500/20 bg-sky-500/5 p-4">
                  <p className="text-xs uppercase text-sky-400">Website trust</p>
                  <p className="mt-1 text-3xl font-bold text-slate-100">{analysis.trust.websiteTrustScore}/100</p>
                  <ul className="mt-2 space-y-1 text-xs text-slate-400">
                    {analysis.trust.websiteTrustNotes.map((n) => (
                      <li key={n}>• {n}</li>
                    ))}
                  </ul>
                </div>
                <div className="rounded-xl border border-indigo-500/20 bg-indigo-500/5 p-4">
                  <p className="text-xs uppercase text-indigo-400">Social trust</p>
                  <p className="mt-1 text-3xl font-bold text-slate-100">{analysis.trust.socialTrustScore}/100</p>
                  <ul className="mt-2 space-y-1 text-xs text-slate-400">
                    {analysis.trust.socialTrustNotes.map((n) => (
                      <li key={n}>• {n}</li>
                    ))}
                  </ul>
                </div>
              </div>
              <p className="mt-3 rounded-lg border border-slate-800 bg-slate-900/50 p-3 text-sm text-slate-300">{analysis.trust.verdict}</p>
            </div>

            {analysis.platforms.length ? (
              <div>
                <p className="mb-2 text-xs uppercase text-slate-500">Platform breakdown</p>
                <div className="grid gap-2 sm:grid-cols-2">
                  {analysis.platforms.map((p) => (
                    <div key={p.platform} className="rounded-xl border border-slate-800 p-3">
                      <div className="flex items-center justify-between">
                        <p className="font-medium text-slate-200">{platformLabels[p.platform]}</p>
                        <span className="text-xs text-slate-500">{p.handle}</span>
                      </div>
                      {p.followers ? <p className="text-xs text-slate-500">{p.followers}</p> : null}
                      <div className="mt-2 flex gap-3 text-xs">
                        <span className="text-indigo-400">Visibility {p.visibilityScore}</span>
                        <span className="text-emerald-400">Trust {p.trustContribution}</span>
                      </div>
                      <p className="mt-1 text-xs text-slate-500">{p.note}</p>
                    </div>
                  ))}
                </div>
              </div>
            ) : null}

            <div>
              <p className="mb-2 flex items-center gap-2 text-xs uppercase text-slate-500">
                <TrendingUp className="h-3.5 w-3.5" />
                Visibility dimensions
              </p>
              <div className="space-y-2">
                {analysis.dimensions.map((dim) => (
                  <div key={dim.dimension} className="rounded-xl border border-slate-800 p-3">
                    <div className="flex flex-wrap items-center justify-between gap-2">
                      <p className="font-medium text-slate-200">{dim.label}</p>
                      <div className="flex items-center gap-3 text-xs">
                        <span className="text-slate-400">You: {dim.yourScore}</span>
                        <span className="text-indigo-400">Leaders: {dim.industryTopAvg}</span>
                        {dim.gap > 0 ? (
                          <Badge className="border-amber-500/30 bg-amber-500/10 text-amber-300">−{dim.gap} gap</Badge>
                        ) : (
                          <Badge className="border-emerald-500/30 bg-emerald-500/10 text-emerald-300">Strong</Badge>
                        )}
                      </div>
                    </div>
                    <p className="mt-1 text-xs text-slate-500">{dim.insight}</p>
                  </div>
                ))}
              </div>
            </div>

            <div>
              <p className="mb-2 text-xs uppercase text-slate-500">Recommended actions</p>
              <div className="space-y-2">
                {analysis.recommendations.map((rec) => (
                  <div key={rec.id} className="rounded-xl border border-slate-800 p-3">
                    <div className="flex flex-wrap items-center gap-2">
                      <Badge className={priorityStyles[rec.priority]}>{rec.priority}</Badge>
                      <p className="font-medium text-slate-100">{rec.title}</p>
                    </div>
                    <p className="mt-1 text-sm text-slate-400">{rec.action}</p>
                    <p className="mt-1 text-xs text-amber-300">{rec.expectedImpact}</p>
                  </div>
                ))}
              </div>
            </div>

            <Link href="/profile#website-analysis" className="inline-flex items-center gap-1 text-sm text-sky-400 hover:text-sky-300">
              Compare with website aesthetic analysis
              <ExternalLink className="h-3.5 w-3.5" />
            </Link>
            <Link href="/agents" className="inline-flex items-center gap-1 text-sm text-indigo-400 hover:text-indigo-300">
              Run Marketing Manager agent to draft posts →
            </Link>
          </>
        )}
      </CardContent>
    </Card>
  );
}