import { useState } from "react";
import clsx from "clsx";

interface Props {
  open: boolean;
  onClose: () => void;
  defaultPlatform?: string;
}

interface Requirement {
  type: string;
  icon: string;
  aspectRatio?: string;
  maxFileSize: string;
  maxCount?: number;
  duration?: string;
  resolution?: string;
  formats: string;
  notes?: string[];
}

const REQUIREMENTS: Record<string, Requirement[]> = {
  Instagram: [
    { type: "Image Post", icon: "fa-solid fa-image", aspectRatio: "3:4 to 1.91:1", maxFileSize: "8MB", formats: "JPEG, PNG" },
    { type: "Carousel", icon: "fa-solid fa-images", aspectRatio: "3:4 to 1.91:1", maxFileSize: "8MB each", maxCount: 10, formats: "JPEG, PNG, MP4, MOV", notes: ["Mixed photos and videos allowed"] },
    { type: "Reel", icon: "fa-solid fa-film", aspectRatio: "9:16 ideal", maxFileSize: "300MB", duration: "3s – 15min", resolution: "≤ 1920px width", formats: "MP4, MOV", notes: ["23–60 FPS", "≤ 25Mbps video bitrate"] },
    { type: "Story (Video)", icon: "fa-solid fa-play", aspectRatio: "9:16 ideal", maxFileSize: "100MB", duration: "3s – 60s", formats: "MP4, MOV" },
    { type: "Story (Photo)", icon: "fa-solid fa-camera", aspectRatio: "9:16 recommended", maxFileSize: "8MB", formats: "JPEG, PNG" },
  ],
  Facebook: [
    { type: "Image Post", icon: "fa-solid fa-image", maxFileSize: "10MB", formats: "JPEG, PNG" },
    { type: "Carousel", icon: "fa-solid fa-images", maxFileSize: "10MB each", maxCount: 10, formats: "JPEG, PNG", notes: ["Photos only, no videos"] },
    { type: "GIF", icon: "fa-solid fa-film", maxFileSize: "8MB", resolution: "≤ 1280×1080px", formats: "GIF" },
    { type: "Video Post", icon: "fa-solid fa-video", maxFileSize: "1GB", duration: "3s – 240min", formats: "MP4, MOV, WebM" },
    { type: "Reel / Story", icon: "fa-solid fa-play", aspectRatio: "9:16", maxFileSize: "1GB", duration: "3s – 90s", resolution: "≥ 540×960px", formats: "MP4, MOV", notes: ["23–60 FPS"] },
  ],
  Twitter: [
    { type: "Image", icon: "fa-solid fa-image", aspectRatio: "< 10:1", maxFileSize: "5MB", formats: "JPEG, PNG" },
    { type: "Carousel", icon: "fa-solid fa-images", aspectRatio: "< 10:1", maxFileSize: "5MB each", maxCount: 4, formats: "JPEG, PNG", notes: ["Photos only"] },
    { type: "GIF", icon: "fa-solid fa-film", maxFileSize: "15MB", resolution: "≤ 1280×1080px", formats: "GIF" },
    { type: "Video", icon: "fa-solid fa-video", aspectRatio: "1:3 to 3:1", maxFileSize: "512MB", duration: "0.5s – 140s", formats: "MP4, MOV, WebM", notes: ["23–60 FPS"] },
  ],
  YouTube: [
    { type: "Short", icon: "fa-solid fa-play", aspectRatio: "9:16 or 1:1", maxFileSize: "4GB", duration: "< 3min", formats: "MP4, MOV, WebM" },
    { type: "Video", icon: "fa-solid fa-video", maxFileSize: "4GB", duration: "> 2s", formats: "MP4, MOV, WebM" },
    { type: "Thumbnail", icon: "fa-solid fa-image", maxFileSize: "2MB", formats: "JPEG, PNG" },
  ],
  TikTok: [
    { type: "Video", icon: "fa-solid fa-video", maxFileSize: "4GB", duration: "3s – 10min", resolution: "360×360 to 4096×4096px", formats: "MP4, MOV, WebM", notes: ["23–60 FPS"] },
    { type: "Photo Post", icon: "fa-solid fa-image", maxFileSize: "10MB each", maxCount: 35, resolution: "≤ 1920×1080px", formats: "JPEG, WebP" },
  ],
  Pinterest: [
    { type: "Image Pin", icon: "fa-solid fa-image", aspectRatio: "2:3 recommended", maxFileSize: "10MB", formats: "JPEG, PNG" },
    { type: "Video Pin", icon: "fa-solid fa-video", aspectRatio: "1:1, 2:3, 4:5, or 9:16", maxFileSize: "2GB", duration: "4s – 15min", formats: "MP4, MOV" },
    { type: "Carousel", icon: "fa-solid fa-images", maxFileSize: "10MB each", maxCount: 5, formats: "JPEG, PNG", notes: ["Same aspect ratio required", "Photos only"] },
  ],
  LinkedIn: [
    { type: "Photo Post", icon: "fa-solid fa-image", maxFileSize: "8MB", resolution: "width × height ≤ 36M px", formats: "JPEG, PNG" },
    { type: "Multi-Image", icon: "fa-solid fa-images", maxFileSize: "8MB each", maxCount: 20, formats: "JPEG, PNG" },
    { type: "Video Post", icon: "fa-solid fa-video", aspectRatio: "9:16 to 16:9", maxFileSize: "500MB", duration: "3s – 30min", formats: "MP4 only" },
    { type: "Document", icon: "fa-solid fa-file", maxFileSize: "100MB", formats: "PDF, PPTX, DOCX", notes: ["Max 300 pages"] },
  ],
  Threads: [
    { type: "Photo", icon: "fa-solid fa-image", aspectRatio: "< 10:1", maxFileSize: "8MB", resolution: "360–1440px width", formats: "JPEG, PNG" },
    { type: "Video", icon: "fa-solid fa-video", aspectRatio: "9:16 recommended", maxFileSize: "1GB", duration: "1s – 5min", resolution: "≤ 1920px width", formats: "MP4, MOV", notes: ["23–60 FPS", "≤ 25Mbps"] },
    { type: "Carousel", icon: "fa-solid fa-images", maxFileSize: "8MB / 1GB", maxCount: 20, formats: "JPEG, PNG, MP4, MOV", notes: ["Mixed photos and videos"] },
  ],
  Bluesky: [
    { type: "Photo", icon: "fa-solid fa-image", maxFileSize: "976KB", formats: "JPEG, PNG, WebP" },
    { type: "Video", icon: "fa-solid fa-video", maxFileSize: "100MB", duration: "1s – 180s", formats: "MP4, MOV" },
    { type: "Carousel", icon: "fa-solid fa-images", maxFileSize: "976KB each", maxCount: 4, formats: "JPEG, PNG, WebP", notes: ["Photos only"] },
  ],
  Mastodon: [
    { type: "Photo", icon: "fa-solid fa-image", maxFileSize: "16MB", formats: "JPEG, PNG, WebP" },
    { type: "Video", icon: "fa-solid fa-video", maxFileSize: "40MB", formats: "MP4, MOV, WebM" },
    { type: "Carousel", icon: "fa-solid fa-images", maxFileSize: "16MB each", maxCount: 4, formats: "JPEG, PNG, WebP", notes: ["Photos only"] },
  ],
};

const PLATFORM_LIST = [
  { key: "Instagram", icon: "📷" },
  { key: "Facebook", icon: "📘" },
  { key: "Twitter", icon: "𝕏", label: "X" },
  { key: "YouTube", icon: "▶️" },
  { key: "TikTok", icon: "🎵" },
  { key: "Pinterest", icon: "📌" },
  { key: "LinkedIn", icon: "💼" },
  { key: "Threads", icon: "🧵" },
  { key: "Bluesky", icon: "🦋" },
  { key: "Mastodon", icon: "🐘" },
];

export default function MediaRequirementsModal({ open, onClose, defaultPlatform }: Props) {
  const [activePlatform, setActivePlatform] = useState(defaultPlatform || "Instagram");

  if (!open) return null;

  const reqs = REQUIREMENTS[activePlatform] || [];

  return (
    <div className="vr-fixed vr-inset-0 vr-z-50 vr-flex vr-items-center vr-justify-center vr-bg-black/30" onClick={onClose}>
      <div className="vr-bg-white vr-rounded-xl vr-shadow-2xl vr-w-full vr-max-w-2xl vr-mx-4 vr-overflow-hidden" onClick={(e) => e.stopPropagation()}>
        {/* Header */}
        <div className="vr-flex vr-items-center vr-justify-between vr-px-5 vr-py-4 vr-border-b vr-border-gray-200">
          <h3 className="vr-text-sm vr-font-bold vr-text-gray-900">Media Requirements</h3>
          <button onClick={onClose} className="vr-text-gray-400 hover:vr-text-gray-600 vr-border-0 vr-bg-transparent vr-cursor-pointer vr-p-1">
            <i className="fa-solid fa-xmark" />
          </button>
        </div>

        <div className="vr-flex" style={{ maxHeight: "500px" }}>
          {/* Platform tabs — left sidebar */}
          <div className="vr-w-36 vr-border-r vr-border-gray-100 vr-overflow-y-auto vr-flex-shrink-0">
            {PLATFORM_LIST.map((p) => (
              <button
                key={p.key}
                onClick={() => setActivePlatform(p.key)}
                className={clsx(
                  "vr-w-full vr-flex vr-items-center vr-gap-2 vr-px-3 vr-py-2.5 vr-text-xs vr-font-medium vr-border-0 vr-cursor-pointer vr-transition-colors vr-text-left",
                  activePlatform === p.key
                    ? "vr-bg-gray-100 vr-text-gray-900 vr-font-semibold"
                    : "vr-bg-transparent vr-text-gray-600 hover:vr-bg-gray-50"
                )}
              >
                <span>{p.icon}</span>
                {p.label || p.key}
              </button>
            ))}
          </div>

          {/* Requirements content */}
          <div className="vr-flex-1 vr-overflow-y-auto vr-p-5">
            <div className="vr-space-y-4">
              {reqs.map((req, i) => (
                <div key={i} className="vr-border vr-border-gray-200 vr-rounded-lg vr-p-4">
                  <div className="vr-flex vr-items-center vr-gap-2 vr-mb-3">
                    <i className={`${req.icon} vr-text-gray-400`} style={{ fontSize: "14px" }} />
                    <h4 className="vr-text-sm vr-font-semibold vr-text-gray-900">{req.type}</h4>
                  </div>
                  <div className="vr-grid vr-grid-cols-2 vr-gap-2">
                    {req.aspectRatio && (
                      <div>
                        <span className="vr-text-xs vr-text-gray-500">Aspect Ratio</span>
                        <p className="vr-text-xs vr-font-medium vr-text-gray-800">{req.aspectRatio}</p>
                      </div>
                    )}
                    <div>
                      <span className="vr-text-xs vr-text-gray-500">Max File Size</span>
                      <p className="vr-text-xs vr-font-medium vr-text-gray-800">{req.maxFileSize}</p>
                    </div>
                    {req.duration && (
                      <div>
                        <span className="vr-text-xs vr-text-gray-500">Duration</span>
                        <p className="vr-text-xs vr-font-medium vr-text-gray-800">{req.duration}</p>
                      </div>
                    )}
                    {req.resolution && (
                      <div>
                        <span className="vr-text-xs vr-text-gray-500">Resolution</span>
                        <p className="vr-text-xs vr-font-medium vr-text-gray-800">{req.resolution}</p>
                      </div>
                    )}
                    {req.maxCount && (
                      <div>
                        <span className="vr-text-xs vr-text-gray-500">Max Items</span>
                        <p className="vr-text-xs vr-font-medium vr-text-gray-800">Up to {req.maxCount}</p>
                      </div>
                    )}
                    <div>
                      <span className="vr-text-xs vr-text-gray-500">Formats</span>
                      <p className="vr-text-xs vr-font-medium vr-text-gray-800">{req.formats}</p>
                    </div>
                  </div>
                  {req.notes && req.notes.length > 0 && (
                    <div className="vr-mt-2 vr-pt-2 vr-border-t vr-border-gray-100">
                      {req.notes.map((note, j) => (
                        <p key={j} className="vr-text-xs vr-text-gray-500 vr-italic">• {note}</p>
                      ))}
                    </div>
                  )}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}