/**
 * ArchitectureDiagram — System architecture visualization
 * Design: Warm Showroom — forest green, terracotta, cream palette
 * Shows how the chatbot integrates with Homelegance's existing systems
 */
import { motion } from "framer-motion";
import {
  Globe,
  Server,
  Database,
  Brain,
  MessageSquare,
  ShieldCheck,
  Webhook,
  Users,
} from "lucide-react";

interface ArchBlock {
  id: string;
  label: string;
  sublabel: string;
  icon: React.ReactNode;
  color: string;
  tier: "frontend" | "middleware" | "backend" | "external";
}

const BLOCKS: ArchBlock[] = [
  {
    id: "website",
    label: "homelegance.com",
    sublabel: "Website Frontend",
    icon: <Globe className="w-5 h-5" />,
    color: "#14532D",
    tier: "frontend",
  },
  {
    id: "widget",
    label: "Chat Widget",
    sublabel: "Embedded JS SDK",
    icon: <MessageSquare className="w-5 h-5" />,
    color: "#14532D",
    tier: "frontend",
  },
  {
    id: "gateway",
    label: "API Gateway",
    sublabel: "Auth & Rate Limiting",
    icon: <ShieldCheck className="w-5 h-5" />,
    color: "#78716C",
    tier: "middleware",
  },
  {
    id: "webhook",
    label: "Webhook Router",
    sublabel: "Event Processing",
    icon: <Webhook className="w-5 h-5" />,
    color: "#78716C",
    tier: "middleware",
  },
  {
    id: "nlp",
    label: "NLP Engine",
    sublabel: "Intent & Entity Recognition",
    icon: <Brain className="w-5 h-5" />,
    color: "#C2410C",
    tier: "backend",
  },
  {
    id: "dialog",
    label: "Dialog Manager",
    sublabel: "Conversation State",
    icon: <MessageSquare className="w-5 h-5" />,
    color: "#C2410C",
    tier: "backend",
  },
  {
    id: "crm",
    label: "CRM / ERP",
    sublabel: "Homelegance Systems",
    icon: <Database className="w-5 h-5" />,
    color: "#78716C",
    tier: "external",
  },
  {
    id: "agents",
    label: "Live Agents",
    sublabel: "Human Handoff",
    icon: <Users className="w-5 h-5" />,
    color: "#78716C",
    tier: "external",
  },
];

const TIERS = [
  { key: "frontend", label: "Client Layer", color: "#14532D" },
  { key: "middleware", label: "Middleware", color: "#78716C" },
  { key: "backend", label: "AI & Logic", color: "#C2410C" },
  { key: "external", label: "Integrations", color: "#78716C" },
];

export default function ArchitectureDiagram() {
  return (
    <div className="w-full">
      <div className="space-y-4">
        {TIERS.map((tier, tierIdx) => {
          const tierBlocks = BLOCKS.filter((b) => b.tier === tier.key);
          return (
            <motion.div
              key={tier.key}
              initial={{ opacity: 0, x: -20 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ delay: tierIdx * 0.1 }}
            >
              {/* Tier label */}
              <div className="flex items-center gap-3 mb-3">
                <span
                  className="text-xs font-bold uppercase tracking-wider px-3 py-1 rounded-full"
                  style={{
                    background: tier.color + "12",
                    color: tier.color,
                    fontFamily: "'Source Sans 3', sans-serif",
                  }}
                >
                  {tier.label}
                </span>
                <div className="flex-1 h-px" style={{ background: tier.color + "20" }} />
              </div>

              {/* Blocks row */}
              <div className="grid grid-cols-2 gap-3">
                {tierBlocks.map((block, blockIdx) => (
                  <motion.div
                    key={block.id}
                    initial={{ opacity: 0, y: 10 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true }}
                    transition={{ delay: tierIdx * 0.1 + blockIdx * 0.05 }}
                    whileHover={{ y: -3, boxShadow: `0 8px 24px ${block.color}18` }}
                    className="p-4 rounded-xl border transition-all"
                    style={{
                      background: "#fff",
                      borderColor: "#e7e0d5",
                    }}
                  >
                    <div className="flex items-start gap-3">
                      <div
                        className="w-10 h-10 rounded-lg flex items-center justify-center shrink-0"
                        style={{ background: block.color + "12", color: block.color }}
                      >
                        {block.icon}
                      </div>
                      <div>
                        <h5
                          className="text-sm font-semibold"
                          style={{ color: "#292524", fontFamily: "'Source Sans 3', sans-serif" }}
                        >
                          {block.label}
                        </h5>
                        <p className="text-xs mt-0.5" style={{ color: "#a8a29e" }}>
                          {block.sublabel}
                        </p>
                      </div>
                    </div>
                  </motion.div>
                ))}
              </div>

              {/* Connector arrows between tiers */}
              {tierIdx < TIERS.length - 1 && (
                <div className="flex justify-center py-2">
                  <div className="flex flex-col items-center">
                    <div className="w-0.5 h-3" style={{ background: "#d6d3d1" }} />
                    <div
                      className="w-0 h-0"
                      style={{
                        borderLeft: "5px solid transparent",
                        borderRight: "5px solid transparent",
                        borderTop: "6px solid #d6d3d1",
                      }}
                    />
                  </div>
                </div>
              )}
            </motion.div>
          );
        })}
      </div>
    </div>
  );
}
