"use client";

import * as React from "react";
import { FormState } from "../types";
import { ASSET_OPTIONS } from "../constants";
import { Checkbox } from "../components/Checkbox";
import { RepeatableList } from "../components/RepeatableList";
import { motion } from "framer-motion";
import { Briefcase, ListPlus } from "lucide-react";
import { Reveal } from "../../Reveal";

interface AssetsStepProps {
  state: FormState;
  updateState: (_updates: Partial<FormState>) => void;
  toggleItem: (_list: string[], _id: string) => string[];
}

export function AssetsStep({
  state,
  updateState,
  toggleItem,
}: AssetsStepProps) {
  const toggleDontKnow = (id: string) => {
    const current = state.dontKnows || [];
    if (current.includes(id)) {
      updateState({ dontKnows: current.filter((i) => i !== id) });
    } else {
      updateState({ dontKnows: [...current, id] });
    }
  };

  return (
    <div className="space-y-12">
      <Reveal width="100%" delay={0.1}>
        <div className="space-y-6">
          <div className="flex justify-between items-center">
            <div className="flex items-center gap-4">
              <div className="w-8 h-8 bg-slate-50 rounded-xl flex items-center justify-center text-black">
                <Briefcase size={16} />
              </div>
              <h4 className="text-lg font-bold text-slate-900">
                Vorhandene Assets
              </h4>
            </div>
            <motion.button
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              type="button"
              onClick={() => toggleDontKnow("assets")}
              className={`px-6 py-3 rounded-full text-sm font-bold transition-all whitespace-nowrap shrink-0 ${
                state.dontKnows?.includes("assets")
                  ? "bg-slate-900 text-white"
                  : "bg-slate-100 text-slate-500 hover:bg-slate-200"
              }`}
            >
              Ich weiß es nicht
            </motion.button>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {ASSET_OPTIONS.map((opt, index) => (
              <motion.div
                key={opt.id}
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: index * 0.05 }}
              >
                <div className="relative">
                  <Checkbox
                    key={opt.id}
                    label={opt.label}
                    desc={opt.desc}
                    checked={state.assets.includes(opt.id)}
                    onChange={() =>
                      updateState({ assets: toggleItem(state.assets, opt.id) })
                    }
                  />
                  {["logo", "styleguide", "content_concept"].includes(
                    opt.id,
                  ) && (
                    <div className="absolute top-4 right-4 px-2 py-1 bg-slate-100 text-slate-500 text-[10px] font-bold uppercase tracking-wider rounded">
                      Empfohlen
                    </div>
                  )}
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </Reveal>

      <Reveal width="100%" delay={0.2}>
        <div className="space-y-12">
          <div className="space-y-6">
            <div className="flex items-center gap-4">
              <div className="w-8 h-8 bg-slate-50 rounded-xl flex items-center justify-center text-black">
                <ListPlus size={16} />
              </div>
              <h4 className="text-lg font-bold text-slate-900">
                Weitere vorhandene Unterlagen?
              </h4>
            </div>
            <RepeatableList
              items={state.otherAssets}
              onAdd={(v) =>
                updateState({ otherAssets: [...state.otherAssets, v] })
              }
              onRemove={(i) =>
                updateState({
                  otherAssets: state.otherAssets.filter((_, idx) => idx !== i),
                })
              }
              placeholder="z.B. Lastenheft, Wireframes, Bilddatenbank..."
            />
          </div>
        </div>
      </Reveal>
    </div>
  );
}
