"use client";

import { PhoneDeviceFrame } from "@/components/phone-frame";
import {
  ArrowLeft,
  Phone,
  Video,
  MoreVertical,
  Paperclip,
  Smile,
  Mic,
  Camera,
  CheckCheck,
} from "lucide-react";
import type { IndustryMessage } from "@/content/industries";

interface IndustryWhatsAppMockupProps {
  chatTitle: string;
  chatSubtitle: string;
  messages: IndustryMessage[];
}

export function IndustryWhatsAppMockup({
  chatTitle,
  messages,
}: IndustryWhatsAppMockupProps) {
  return (
    <div className="relative flex w-full items-center justify-center p-4 sm:p-8">
      {/* Halftone canvas background grid */}
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0 rounded-3xl opacity-20"
        style={{
          backgroundImage: "radial-gradient(circle, currentColor 1.2px, transparent 1.2px)",
          backgroundSize: "20px 20px",
        }}
      />

      <div className="relative z-10 w-full max-w-[300px] sm:max-w-[340px]">
        <PhoneDeviceFrame className="shadow-2xl">
          {/* iOS Status Bar */}
          <div className="flex h-[8%] min-h-9 shrink-0 items-end justify-between px-6 pb-1 text-[11px] font-semibold text-neutral-800 dark:text-neutral-200">
            <span>9:41</span>
            <div className="flex items-center gap-1.5 text-xs">
              <span>5G</span>
              <div className="h-2.5 w-5 rounded-xs border border-current p-0.5">
                <div className="h-full w-3/4 rounded-2xs bg-current" />
              </div>
            </div>
          </div>

          {/* WhatsApp Header Bar */}
          <div className="flex shrink-0 items-center justify-between border-b border-black/10 bg-foreground px-3 py-2.5 text-background">
            <div className="flex min-w-0 items-center gap-2">
              <ArrowLeft className="size-4 shrink-0" />
              <div className="flex size-7 shrink-0 items-center justify-center rounded-full bg-background/20 text-[11px] font-bold text-background shadow-xs">
                Q
              </div>
              <div className="flex min-w-0 flex-col">
                <div className="flex items-center gap-1">
                  <span className="truncate text-xs font-bold leading-tight">{chatTitle}</span>
                  <span className="flex size-3 shrink-0 items-center justify-center rounded-full bg-background/30 text-[8px] text-background">
                    ✓
                  </span>
                </div>
                <span className="text-[9px] leading-none text-background/70">online</span>
              </div>
            </div>

            <div className="flex shrink-0 items-center gap-3 text-background/80">
              <Video className="size-4" />
              <Phone className="size-3.5" />
              <MoreVertical className="size-3.5" />
            </div>
          </div>

          {/* Chat canvas — fills all remaining screen height */}
          <div
            className="flex min-h-0 flex-1 flex-col bg-muted"
            style={{
              backgroundImage: `radial-gradient(circle, rgba(0,0,0,0.04) 1px, transparent 1px)`,
              backgroundSize: "16px 16px",
            }}
          >
            {/* Scrollable message thread */}
            <div className="min-h-0 flex-1 space-y-2 overflow-y-auto px-3 py-3">
              {/* Date capsule */}
              <div className="flex justify-center pb-1">
                <span className="rounded-md bg-white/85 px-2.5 py-0.5 text-[9px] font-medium text-neutral-600 shadow-2xs dark:bg-neutral-800/80 dark:text-neutral-300">
                  Today
                </span>
              </div>

              {messages.map((msg, idx) => (
                <div
                  key={idx}
                  className={`flex max-w-[85%] flex-col rounded-xl px-2.5 py-1.5 text-[11px] leading-relaxed shadow-xs ${
                    msg.from === "user"
                      ? "ml-auto rounded-tr-xs bg-primary text-primary-foreground"
                      : "mr-auto rounded-tl-xs bg-background text-foreground"
                  }`}
                >
                  <span>{msg.text}</span>
                  <div
                    className={`mt-0.5 flex items-center justify-end gap-1 text-[8px] ${
                      msg.from === "user" ? "text-primary-foreground/70" : "text-muted-foreground"
                    }`}
                  >
                    <span>{msg.time || "19:44"}</span>
                    {msg.from === "user" && (
                      <CheckCheck className="size-2.5 text-primary-foreground/90" />
                    )}
                  </div>
                </div>
              ))}
            </div>

            {/* Composer — pinned to the bottom of the screen */}
            <div className="shrink-0 px-2.5 pb-2 pt-1">
              <div className="flex items-center gap-1.5 rounded-full border border-border bg-card px-3 py-1.5 shadow-sm">
                <Smile className="size-4 shrink-0 text-muted-foreground" />
                <span className="flex-1 truncate text-[11px] text-muted-foreground">
                  Message
                </span>
                <Paperclip className="size-3.5 shrink-0 text-muted-foreground" />
                <Camera className="size-3.5 shrink-0 text-muted-foreground" />
                <div className="flex size-6 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground">
                  <Mic className="size-3" />
                </div>
              </div>
            </div>

            {/* Home indicator */}
            <div className="flex shrink-0 justify-center pb-1.5">
              <span className="h-1 w-24 rounded-full bg-foreground/25" />
            </div>
          </div>
        </PhoneDeviceFrame>
      </div>
    </div>
  );
}