"use client";

import Link from "next/link";
import {
  ExternalLink,
  Facebook,
  Globe,
  Instagram,
  Linkedin,
  Youtube,
} from "lucide-react";
import { inferDigitalPresenceFromBusiness } from "@/lib/demo-digital-presence";
import type { Business, SocialPlatform } from "@/lib/types";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

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

function SocialIcon({ platform }: { platform: SocialPlatform }) {
  const className = "h-3.5 w-3.5";
  switch (platform) {
    case "instagram":
      return <Instagram className={className} />;
    case "facebook":
      return <Facebook className={className} />;
    case "linkedin":
      return <Linkedin className={className} />;
    case "youtube":
      return <Youtube className={className} />;
    default:
      return <Globe className={className} />;
  }
}

interface DigitalPresencePanelProps {
  business: Business;
  variant?: "compact" | "full";
}

export function DigitalPresencePanel({ business, variant = "full" }: DigitalPresencePanelProps) {
  const presence = inferDigitalPresenceFromBusiness(business);
  if (!presence) return null;

  const hasSocial = presence.socialProfiles.length > 0;
  const hasSoftware = presence.connectedSoftware.length > 0;

  if (variant === "compact") {
    return (
      <Card className="border-slate-800">
        <CardHeader className="pb-2">
          <CardTitle className="flex items-center gap-2 text-sm">
            <Globe className="h-4 w-4 text-sky-400" />
            Website & channels
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-2 text-xs">
          <a
            href={presence.websiteUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="flex items-center gap-1.5 text-sky-300 hover:text-sky-200"
          >
            {presence.websiteUrl.replace(/^https?:\/\//, "")}
            <ExternalLink className="h-3 w-3" />
          </a>
          {hasSocial ? (
            <div className="flex flex-wrap gap-1.5">
              {presence.socialProfiles.map((s) => (
                <a
                  key={s.platform}
                  href={s.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center gap-1 rounded-md border border-slate-700 px-2 py-0.5 text-slate-400 hover:border-sky-500/40 hover:text-sky-300"
                >
                  <SocialIcon platform={s.platform} />
                  {s.handle}
                </a>
              ))}
            </div>
          ) : null}
          {hasSoftware ? (
            <p className="text-slate-500">{presence.connectedSoftware.length} connected tools · Role agents push here</p>
          ) : null}
        </CardContent>
      </Card>
    );
  }

  return (
    <Card className="border-sky-500/20">
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Globe className="h-5 w-5 text-sky-400" />
          Website, social & software stack
        </CardTitle>
        <p className="text-sm text-slate-400">
          Demo businesses include sample websites, social profiles, and the software role agents automate into.
        </p>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="rounded-xl border border-slate-800 bg-slate-900/50 p-4">
          <p className="text-xs uppercase text-slate-500">Sample website</p>
          <p className="mt-1 font-medium text-slate-100">{presence.websiteTitle}</p>
          <p className="mt-1 text-sm text-slate-400">{presence.websiteDescription}</p>
          <a
            href={presence.websiteUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="mt-3 inline-flex items-center gap-1.5 text-sm text-sky-300 hover:text-sky-200"
          >
            {presence.websiteUrl}
            <ExternalLink className="h-3.5 w-3.5" />
          </a>
        </div>

        {hasSocial ? (
          <div>
            <p className="mb-2 text-xs uppercase text-slate-500">Social media</p>
            <div className="grid gap-2 sm:grid-cols-2">
              {presence.socialProfiles.map((s) => (
                <a
                  key={`${s.platform}-${s.handle}`}
                  href={s.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center justify-between rounded-xl border border-slate-800 p-3 transition hover:border-violet-500/30 hover:bg-violet-500/5"
                >
                  <div className="flex items-center gap-2">
                    <div className="flex h-8 w-8 items-center justify-center rounded-lg border border-slate-700 bg-slate-800/60">
                      <SocialIcon platform={s.platform} />
                    </div>
                    <div>
                      <p className="text-sm font-medium text-slate-200">{platformLabels[s.platform]}</p>
                      <p className="text-xs text-slate-500">{s.handle}</p>
                    </div>
                  </div>
                  {s.followers ? (
                    <Badge className="border-slate-700 bg-slate-800/50 text-slate-400">{s.followers}</Badge>
                  ) : null}
                </a>
              ))}
            </div>
          </div>
        ) : null}

        {hasSoftware ? (
          <div>
            <p className="mb-2 text-xs uppercase text-slate-500">Connected software (demo)</p>
            <div className="space-y-2">
              {presence.connectedSoftware.map((tool) => (
                <div
                  key={tool.name}
                  className="rounded-xl border border-slate-800 p-3 sm:flex sm:items-start sm:justify-between sm:gap-4"
                >
                  <div>
                    <div className="flex flex-wrap items-center gap-2">
                      <p className="font-medium text-slate-200">{tool.name}</p>
                      <Badge className="border-slate-700 bg-slate-800/50 text-slate-400">{tool.category}</Badge>
                    </div>
                    <p className="mt-1 text-xs text-slate-500">
                      Used by: {tool.usedByRoles.join(", ")}
                    </p>
                  </div>
                  <Link
                    href={tool.url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="mt-2 inline-flex shrink-0 items-center gap-1 text-xs text-sky-400 hover:text-sky-300 sm:mt-0"
                  >
                    Open in demo
                    <ExternalLink className="h-3 w-3" />
                  </Link>
                </div>
              ))}
            </div>
          </div>
        ) : null}
      </CardContent>
    </Card>
  );
}