"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import { ArrowUpRight, CircleAlert, Landmark, Sparkles, Target } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { ScoreRing } from "@/components/ui/score-ring";
import { RoleIntelligencePanel } from "@/components/roles/role-intelligence-panel";
import { AiLeaderCard } from "@/components/roles/ai-leader-card";
import { DigitalPresencePanel } from "@/components/profile/digital-presence-panel";
import { WebsiteAestheticPanel } from "@/components/profile/website-aesthetic-panel";
import { SocialMediaAnalysisPanel } from "@/components/profile/social-media-analysis-panel";
import { getBusiness } from "@/lib/data-store";
import { resolveUserRole } from "@/lib/user-workplace-role";
import type { Business } from "@/lib/types";

export default function DashboardPage() {
  const [business, setBusiness] = useState<Business | null>(null);

  useEffect(() => {
    getBusiness().then(setBusiness);
  }, []);

  if (!business) {
    return (
      <div className="py-8">
        <Card>
          <CardContent className="p-6 text-sm text-slate-400">
            No Business Brain yet. Complete onboarding to unlock your AI co-founder dashboard.
            <div className="mt-4">
              <Link href="/onboarding">
                <Button>Build My Business Brain</Button>
              </Link>
            </div>
          </CardContent>
        </Card>
      </div>
    );
  }

  const topOps = [...business.opportunities]
    .sort((a, b) => b.estimatedValue - a.estimatedValue)
    .slice(0, 3);
  const topRec = business.recommendations[0];
  const topPriority = business.opportunities.find((o) => o.title === business.metrics.topPriorityToday) ?? topOps[0];
  const userRole = resolveUserRole(business);
  const federalCount = business.opportunities.filter((o) => o.type === "government_contract").length;
  const tradesIndustry = /home services|landscaping|hvac|roofing|plumbing|construction|cleaning/i.test(
    `${business.input.industryCategory} ${business.input.industry}`,
  );

  const scoreCards = [
    { label: "BrandLxft Score", value: business.brandScore.overall },
    { label: "Growth Score", value: business.brandScore.growthScore },
    { label: "Market Opportunity", value: business.brandScore.marketOpportunityScore },
    { label: "Competitive Risk", value: business.brandScore.competitiveRiskScore },
    { label: "Opportunities Found", value: business.metrics.opportunitiesFound },
    { label: "Recommended Actions", value: business.metrics.recommendedActions },
    { label: "Revenue Potential", value: `$${business.metrics.revenuePotential.toLocaleString()}` },
    { label: "Top Priority Today", value: topPriority?.title.slice(0, 28) + "..." },
  ];

  return (
    <div className="space-y-6 py-4">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div>
          <h1 className="text-2xl font-semibold">{business.input.businessName}</h1>
          <p className="text-sm text-slate-400">
            What is happening: {business.metrics.opportunitiesFound} opportunities detected. Why it matters: focused execution can unlock ${business.metrics.revenuePotential.toLocaleString()} in potential value.
          </p>
        </div>
        <Badge className="border-sky-500/30 bg-sky-500/10 text-sky-300">AI Co-Founder Active</Badge>
      </div>

      {tradesIndustry ? (
        <Card className="border-emerald-500/25 bg-emerald-500/5">
          <CardContent className="flex flex-wrap items-center justify-between gap-4 p-5">
            <div>
              <p className="flex items-center gap-2 font-medium text-emerald-200">
                <Landmark className="h-4 w-4" />
                Federal work most owners never hear about
              </p>
              <p className="mt-1 max-w-2xl text-sm text-slate-400">
                Agencies buy {business.input.industry.toLowerCase()} services nationwide. BrandLxft gives you a
                plain-English checklist, NAICS codes, peer examples, and matched open bids — no contracting jargon
                required.
              </p>
            </div>
            <Link href="/opportunities">
              <Button className="gap-2">
                Start federal work guide
                {federalCount > 0 ? (
                  <Badge className="border-emerald-400/30 bg-emerald-400/10 text-emerald-100">
                    {federalCount} bid{federalCount === 1 ? "" : "s"}
                  </Badge>
                ) : null}
                <ArrowUpRight className="h-4 w-4" />
              </Button>
            </Link>
          </CardContent>
        </Card>
      ) : null}

      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
        {scoreCards.map((card) => (
          <Card key={card.label}>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm font-medium text-slate-400">{card.label}</CardTitle>
            </CardHeader>
            <CardContent className="text-xl font-bold text-slate-100">{card.value}</CardContent>
          </Card>
        ))}
      </div>

      {business.digitalPresence ? (
        <DigitalPresencePanel business={business} variant="compact" />
      ) : null}

      <WebsiteAestheticPanel business={business} onUpdate={setBusiness} variant="compact" />

      <SocialMediaAnalysisPanel business={business} onUpdate={setBusiness} variant="compact" />

      <div className="grid gap-4 lg:grid-cols-3">
        <Card>
          <CardHeader>
            <CardTitle>Brand health</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex justify-center">
              <ScoreRing score={business.brandScore.overall} label="BrandLxft Score" />
            </div>
            <div className="grid grid-cols-2 gap-2 text-xs text-slate-400">
              <span>Visibility: {business.brandScore.visibility}</span>
              <span>Trust: {business.brandScore.trust}</span>
              <span>Demand: {business.brandScore.demand}</span>
              <span>Conversion: {business.brandScore.conversion}</span>
              <span className="col-span-2">Advocacy: {business.brandScore.advocacy}</span>
            </div>
          </CardContent>
        </Card>

        <Card className="lg:col-span-2">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Target className="h-4 w-4 text-amber-400" /> Today&apos;s priorities
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            {topOps.map((opp) => (
              <div key={opp.id} className="rounded-xl border border-slate-800 p-3">
                <p className="font-medium text-slate-100">{opp.title}</p>
                <p className="text-sm text-slate-400">{opp.description}</p>
                <div className="mt-2 flex flex-wrap items-center justify-between gap-2 text-xs text-slate-400">
                  <span>Revenue potential: ${opp.estimatedValue.toLocaleString()}</span>
                  <span>{opp.recommendedAction}</span>
                </div>
              </div>
            ))}
          </CardContent>
        </Card>
      </div>

      <div className="grid gap-4 lg:grid-cols-2">
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <CircleAlert className="h-4 w-4 text-amber-400" /> Competitor alerts
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            {business.competitors.map((c) => (
              <div key={c.id} className="rounded-xl border border-slate-800 p-3">
                <p className="font-medium">{c.name}</p>
                <p className="text-sm text-slate-400">{c.beatOpportunity}</p>
              </div>
            ))}
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Sparkles className="h-4 w-4 text-sky-400" /> Suggested actions
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            {business.recommendations.slice(0, 3).map((rec) => (
              <div key={rec.id} className="rounded-xl border border-slate-800 p-3">
                <p className="font-medium">{rec.title}</p>
                <p className="text-sm text-slate-400">{rec.whatToDoNext}</p>
                <p className="mt-1 text-xs text-amber-300">Revenue potential: ${rec.revenuePotential.toLocaleString()}</p>
              </div>
            ))}
            <Link href="/strategy">
              <Button variant="outline" className="w-full gap-2">
                Open AI Strategy Room
                <ArrowUpRight className="h-4 w-4" />
              </Button>
            </Link>
          </CardContent>
        </Card>
      </div>

      {business.roleIntelligence ? (
        <RoleIntelligencePanel
          roles={business.roleIntelligence}
          variant="compact"
          userRoleTitle={userRole.title}
          aiLeaderEnabled={userRole.aiLeaderEnabled}
        />
      ) : null}

      <AiLeaderCard business={business} onUpdate={setBusiness} />

      <Card>
        <CardHeader>
          <CardTitle>AI co-founder summary</CardTitle>
        </CardHeader>
        <CardContent className="text-sm text-slate-300">
          {business.aiSummary ?? topRec?.whyItMatters}
        </CardContent>
      </Card>
    </div>
  );
}