/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";

import { Button } from "@/src/elements/ui/button";
import { Input } from "@/src/elements/ui/input";
import { Label } from "@/src/elements/ui/label";
import { Textarea } from "@/src/elements/ui/textarea";
import { PlatformItem, PlatformSection } from "@/src/types/landingPage";
import { GripVertical, Monitor, Plus, Rocket, Sparkles, Trash2 } from "lucide-react";
import ImageSelector from "../shared/ImageSelector";

interface PlatformFormProps {
  data: PlatformSection;
  onChange: (data: PlatformSection) => void;
}

const PlatformForm = ({ data, onChange }: PlatformFormProps) => {
  const handleChange = (field: keyof PlatformSection, value: any) => {
    onChange({ ...data, [field]: value });
  };

  const handleItemChange = (index: number, field: keyof PlatformItem, value: any) => {
    const newItems = [...data.items];
    newItems[index] = { ...newItems[index], [field]: value };
    handleChange("items", newItems);
  };

  const addItem = () => {
    handleChange("items", [
      ...data.items,
      { step: data.items.length + 1, tagline: "", title: "", description: "", bullets: [], image: "" },
    ]);
  };

  const removeItem = (index: number) => {
    const filteredItems = data.items.filter((_, i) => i !== index);
    // Re-index steps
    const reindexedItems = filteredItems.map((item, i) => ({ ...item, step: i + 1 }));
    handleChange("items", reindexedItems);
  };

  const handleBulletChange = (itemIndex: number, bulletIndex: number, value: string) => {
    const newItems = [...data.items];
    const newBullets = [...newItems[itemIndex].bullets];
    newBullets[bulletIndex] = value;
    newItems[itemIndex] = { ...newItems[itemIndex], bullets: newBullets };
    handleChange("items", newItems);
  };

  const addBullet = (itemIndex: number) => {
    const newItems = [...data.items];
    newItems[itemIndex] = {
      ...newItems[itemIndex],
      bullets: [...newItems[itemIndex].bullets, ""],
    };
    handleChange("items", newItems);
  };

  const removeBullet = (itemIndex: number, bulletIndex: number) => {
    const newItems = [...data.items];
    newItems[itemIndex] = {
      ...newItems[itemIndex],
      bullets: newItems[itemIndex].bullets.filter((_, i) => i !== bulletIndex),
    };
    handleChange("items", newItems);
  };

  return (
    <div className="space-y-12 animate-in fade-in slide-in-from-bottom-4 duration-500">
      {/* Header Configuration */}
      <div className="grid grid-cols-1 [@media(min-width:1421px)]:grid-cols-12 gap-8">
        <div className="[@media(min-width:1421px)]:col-span-7 space-y-6">
          <div className="space-y-2.5 flex flex-col">
            <Label className="text-[13px] font-bold text-gray-700 dark:text-gray-300">Section Badge</Label>
            <Input value={data.badge} onChange={(e) => handleChange("badge", e.target.value)} placeholder="e.g. PLATFORM" className="bg-(--input-color) dark:bg-page-body border-(--input-border-color) dark:border-(--card-border-color) h-12 text-[15px]" />
          </div>
          <div className="space-y-2.5 flex flex-col">
            <Label className="text-[13px] font-bold text-gray-700 dark:text-gray-300">Main Headline</Label>
            <Input value={data.title} onChange={(e) => handleChange("title", e.target.value)} placeholder="Enter section headline" className="bg-(--input-color) dark:bg-page-body border-(--input-border-color) dark:border-(--card-border-color) h-12 text-[15px] font-medium" />
          </div>
        </div>
      </div>

      {/* Workflow Items Section */}
      <div className="space-y-6 pt-10 border-t border-gray-100 dark:border-(--card-border-color)">
        <div className="flex items-center justify-between flex-wrap gap-3 sm:gap-0">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center text-primary">
              <Monitor className="w-5 h-5" />
            </div>
            <div>
              <h3 className="text-[16px] font-bold text-gray-900 dark:text-gray-100">Workflow Interaction Nodes</h3>
              <p className="text-[12px] text-gray-400">Add detailed platform steps to guide your users</p>
            </div>
          </div>
        </div>

        <div className="grid grid-cols-1 gap-6 md:gap-8">
          {data.items.map((item, itemIndex) => (
            <div key={itemIndex} className="group relative flex flex-col xl:flex-row gap-6 md:gap-8 p-5 md:p-8 bg-white border border-gray-100 dark:border-(--card-border-color) rounded-lg dark:bg-(--dark-body) dark:border-none shadow-sm transition-all duration-300">
              {/* Drag Handle (Visual only for now) */}
              <div className="absolute top-10 left-2 hidden md:flex flex-col items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
                <div className="w-1 h-12 bg-gray-100 dark:bg-gray-800 rounded-full" />
                <GripVertical className="w-4 h-4 text-gray-300" />
              </div>

              <div className="flex-1 grid grid-cols-1 [@media(min-width:1421px)]:grid-cols-12 gap-8 xl:pl-4">
                {/* Column 1: Image and Step Metadata */}
                <div className="[@media(min-width:1421px)]:col-span-4 xl:col-span-4 space-y-6">
                  <ImageSelector label="Visual Representation" value={item.image} onChange={(url) => handleItemChange(itemIndex, "image", url)} className="space-y-2! md:max-w-md xl:max-w-none mx-auto lg:mx-0" />

                  <div
                    className="grid grid-cols-2 gap-4 [@media(max-width:475px)]:grid-cols-1"
                  >
                    <div className="space-y-2 px-1">
                      <Label className="text-[11px] font-black text-primary/60 uppercase tracking-widest flex items-center gap-1.5">
                        <Rocket className="w-3 h-3" />
                        Step {itemIndex + 1}
                      </Label>
                      <div className="h-10 flex items-center px-4 bg-primary/5 dark:bg-primary/10 text-primary text-[13px] font-black rounded-lg border border-primary/10">
                        NODE #0{itemIndex + 1}
                      </div>
                    </div>
                    <div className="space-y-2 px-1">
                      <Label className="text-[11px] font-black text-gray-400 uppercase tracking-widest">Small Tag</Label>
                      <Input value={item.tagline} onChange={(e) => handleItemChange(itemIndex, "tagline", e.target.value)} placeholder="TAGLINE" className="h-10 text-xs bg-(--input-color) border-(--input-border-color) dark:bg-page-body rounded-lg" />
                    </div>
                  </div>
                </div>

                {/* Column 2: Content and Highlights */}
                <div className="[@media(min-width:1421px)]:col-span-7 xl:col-span-8 space-y-6">
                  <div className="space-y-3">
                    <div className="space-y-2 flex flex-col">
                      <Label className="text-[13px] font-bold text-gray-700 dark:text-gray-300">Step Title</Label>
                      <Input value={item.title} onChange={(e) => handleItemChange(itemIndex, "title", e.target.value)} placeholder="e.g. AI Workflow Builder" className="bg-(--input-color) border-(--input-border-color) dark:bg-page-body h-11 text-[15px] font-bold rounded-lg" />
                    </div>
                    <div className="space-y-2 flex flex-col">
                      <Label className="text-[13px] font-bold text-gray-700 dark:text-gray-300">Brief Narrative</Label>
                      <Textarea value={item.description} onChange={(e) => handleItemChange(itemIndex, "description", e.target.value)} placeholder="Explain how this step benefits the user..." rows={2} className="bg-(--input-color) dark:bg-page-body border-(--input-border-color) dark:border-(--card-border-color) resize-none text-[14px] leading-relaxed p-4 rounded-lg" />
                    </div>
                  </div>

                  {/* Bullet Highlights */}
                  <div className="space-y-4 bg-gray-50/30 dark:bg-(--card-color) sm:p-5 p-4 rounded-lg border border-gray-100 dark:border-none">
                    <div className="flex items-center justify-between px-1 flex-wrap gap-2 sm:gap-0">
                      <Label className="text-[14px] font-medium text-primary flex items-center gap-2">
                        <Sparkles className="w-3 h-3" />
                        Key Features
                      </Label>
                      <Button variant="ghost" size="sm" onClick={() => addBullet(itemIndex)} className="h-8 text-[12px] bg-primary hover:bg-primary hover:text-white font-bold text-white rounded-lg px-2">
                        <Plus className="w-3 h-3 mr-1" />
                        Add Node
                      </Button>
                    </div>

                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                      {item.bullets.map((bullet, bulletIndex) => (
                        <div key={bulletIndex} className="group/bullet relative">
                          <Input value={bullet} onChange={(e) => handleBulletChange(itemIndex, bulletIndex, e.target.value)} placeholder="Add feature..." className="h-10 text-[13px] pr-12! bg-(--input-color) border-(--input-border-color) dark:bg-page-body shadow-sm rounded-lg pl-4 pr-10" />
                          <Button onClick={() => removeBullet(itemIndex, bulletIndex)} className="absolute w-9 bg-[unset]! right-2 top-1/2 -translate-y-1/2 p-1.5 text-gray-300 hover:text-red-500 opacity-0 group-hover/bullet:opacity-100 transition-all hover:bg-red-50 dark:hover:bg-red-900/10 rounded-lg">
                            <Trash2 className="w-3.5 h-3.5" />
                          </Button>
                        </div>
                      ))}
                      {item.bullets.length === 0 && <div className="col-span-full py-4 text-center border border-dashed border-gray-200 dark:border-gray-800 rounded-lg text-gray-400 text-[11px] font-medium">No highlight points added yet</div>}
                    </div>
                  </div>
                </div>

                {/* Remove Step Button */}
                <div className="absolute top-4 right-4 md:top-8 md:right-8 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                  <Button onClick={() => removeItem(itemIndex)} className="w-10 h-10 text-slate-400 hover:text-red-500 dark:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-all duration-300 bg-white/80 dark:bg-zinc-800/10 md:bg-transparent shadow-sm md:shadow-none">
                    <Trash2 className="w-5 h-5 [@media(min-width:1421px)]:w-6 [@media(min-width:1421px)]:h-6" />
                  </Button>
                </div>
              </div>
            </div>
          ))}

          {data.items.length === 0 && (
            <div className="py-32 border-2 border-dashed border-gray-100 dark:border-(--card-border-color) rounded-[3.5rem] flex flex-col items-center justify-center text-gray-300 bg-gray-50/20">
              <div className="w-20 h-20 rounded-full bg-gray-50 dark:bg-zinc-900/50 flex items-center justify-center mb-6">
                <Rocket className="w-10 h-10 opacity-10" />
              </div>
              <p className="text-[16px] font-bold text-gray-400">Your platform story starts here</p>
              <Button onClick={addItem} variant="link" className="text-primary mt-2 text-[14px]">
                Create your first platform node
              </Button>
            </div>
          )}
          <div className="flex items-center justify-end">
            <Button onClick={addItem} size="sm" className="gap-2 h-10 px-6 rounded-lg bg-primary text-white hover:bg-primary/90 shadow-lg shadow-primary/20">
              <Plus className="w-4 h-4" />
              Add New Step
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default PlatformForm;