"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { RoleIntelligencePanel } from "@/components/roles/role-intelligence-panel";
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 { ScoreRing } from "@/components/ui/score-ring";
import { getBusiness } from "@/lib/data-store";
import { resolveUserRole } from "@/lib/user-workplace-role";
import type { Business } from "@/lib/types";

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

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

  if (loading) {
    return (
      <div className="space-y-4 py-4">
        <Card>
          <CardContent className="p-6 text-sm text-slate-400">Loading business profile…</CardContent>
        </Card>
      </div>
    );
  }

  if (!business) {
    return (
      <div className="space-y-4 py-4">
        <Card>
          <CardContent className="p-6 text-sm text-slate-400">
            No Business Brain yet. Load a demo or complete onboarding to see your team blueprint.
            <div className="mt-4 flex flex-wrap gap-2">
              <Link href="/demo">
                <Button>Explore demos</Button>
              </Link>
              <Link href="/onboarding">
                <Button variant="outline">Build My Business Brain</Button>
              </Link>
            </div>
          </CardContent>
        </Card>
      </div>
    );
  }

  const profile = business.profile;
  const score = business.brandScore;
  const userRole = resolveUserRole(business);

  return (
    <div className="space-y-4 py-4">
      <div>
        <h1 className="text-2xl font-semibold">Business Profile</h1>
        <p className="text-sm text-slate-400">{business.input.businessName} — intelligence profile and team blueprint</p>
      </div>

      {business.roleIntelligence ? (
        <div id="team-blueprint" className="scroll-mt-6">
          <RoleIntelligencePanel
            roles={business.roleIntelligence}
            variant="full"
            userRoleTitle={userRole.title}
            aiLeaderEnabled={userRole.aiLeaderEnabled}
          />
        </div>
      ) : null}

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

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

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

      <Card>
        <CardHeader>
          <CardTitle>Business Intelligence Profile</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4 text-sm text-slate-300">
          <div>
            <p className="text-xs uppercase text-slate-500">Company summary</p>
            <p className="mt-1">{profile.companySummary}</p>
          </div>
          <div>
            <p className="text-xs uppercase text-slate-500">Brand positioning</p>
            <p className="mt-1">{profile.brandPositioning}</p>
          </div>
          <div className="grid gap-4 md:grid-cols-2">
            <div>
              <p className="text-xs uppercase text-slate-500">Target audience</p>
              <p className="mt-1">{profile.targetAudience}</p>
            </div>
            <div>
              <p className="text-xs uppercase text-slate-500">Products / services</p>
              <p className="mt-1">{profile.productsServices}</p>
            </div>
          </div>
        </CardContent>
      </Card>

      <div className="grid gap-4 md:grid-cols-2">
        <Card>
          <CardHeader><CardTitle>Strengths</CardTitle></CardHeader>
          <CardContent className="space-y-2 text-sm">{profile.strengths.map((s) => <p key={s}>• {s}</p>)}</CardContent>
        </Card>
        <Card>
          <CardHeader><CardTitle>Weaknesses</CardTitle></CardHeader>
          <CardContent className="space-y-2 text-sm">{profile.weaknesses.map((s) => <p key={s}>• {s}</p>)}</CardContent>
        </Card>
        <Card>
          <CardHeader><CardTitle>Market opportunities</CardTitle></CardHeader>
          <CardContent className="space-y-2 text-sm">{profile.marketOpportunities.map((s) => <p key={s}>• {s}</p>)}</CardContent>
        </Card>
        <Card>
          <CardHeader><CardTitle>Suggested competitors</CardTitle></CardHeader>
          <CardContent className="space-y-2 text-sm">{profile.suggestedCompetitors.map((s) => <p key={s}>• {s}</p>)}</CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader><CardTitle>Brand improvement suggestions</CardTitle></CardHeader>
        <CardContent className="space-y-2 text-sm">{profile.brandImprovements.map((s) => <p key={s}>• {s}</p>)}</CardContent>
      </Card>

      <Card>
        <CardHeader><CardTitle>BrandLxft Score breakdown</CardTitle></CardHeader>
        <CardContent className="grid gap-4 md:grid-cols-[200px_1fr]">
          <div className="flex justify-center">
            <ScoreRing score={score.overall} label="Overall" />
          </div>
          <div className="space-y-3 text-sm">
            {(["visibility", "trust", "demand", "conversion", "advocacy"] as const).map((key) => (
              <div key={key} className="rounded-lg border border-slate-800 p-3">
                <p className="font-medium capitalize">{key}: {score[key]}/100</p>
                <p className="text-slate-400">{score.suggestions[key]}</p>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}