'use client';

import * as React from 'react';
import { FormState } from '../types';
import { Checkbox } from '../components/Checkbox';
import { RepeatableList } from '../components/RepeatableList';
import { Minus, Plus, Link2, Globe, Share2 } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';
import { Reveal } from '../../Reveal';

interface PresenceStepProps {
  state: FormState;
  updateState: (updates: Partial<FormState>) => void;
  toggleItem: (list: string[], id: string) => string[];
}

export function PresenceStep({ state, updateState, toggleItem }: PresenceStepProps) {
  const updateUrl = (id: string, url: string) => {
    updateState({
      socialMediaUrls: {
        ...state.socialMediaUrls,
        [id]: url
      }
    });
  };

  const SOCIAL_PLATFORMS = [
    { id: 'instagram', label: 'Instagram' },
    { id: 'linkedin', label: 'LinkedIn' },
    { id: 'facebook', label: 'Facebook' },
    { id: 'twitter', label: 'Twitter / X' },
    { id: 'tiktok', label: 'TikTok' },
    { id: 'youtube', label: 'YouTube' },
  ];

  return (
    <div className="space-y-16">
      <Reveal width="100%" delay={0.1}>
        <div className="space-y-8">
          <div className="flex items-center gap-4">
            <div className="w-12 h-12 bg-slate-50 rounded-2xl flex items-center justify-center text-slate-900 shadow-sm">
              <Globe size={24} />
            </div>
            <h4 className="text-2xl font-bold text-slate-900">Bestehende Website</h4>
          </div>
          <div className="space-y-4">
            <label className="block text-sm font-bold uppercase tracking-widest text-slate-400 ml-2">URL (falls vorhanden)</label>
            <div className="relative group">
              <div className="absolute left-6 top-1/2 -translate-y-1/2 text-slate-300 group-focus-within:text-slate-900 transition-colors">
                <Link2 size={24} />
              </div>
              <input 
                type="url" 
                placeholder="https://www.beispiel.de" 
                value={state.existingWebsite} 
                onChange={(e) => updateState({ existingWebsite: e.target.value })} 
                className="w-full p-8 pl-16 bg-white border border-slate-100 rounded-[3rem] focus:outline-none focus:border-slate-900 transition-all duration-500 text-xl shadow-sm focus:shadow-2xl" 
              />
            </div>
          </div>
        </div>
      </Reveal>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
        <Reveal width="100%" delay={0.2}>
          <div className="space-y-4">
            <label className="block text-sm font-bold uppercase tracking-widest text-slate-400 ml-2">Bestehende Domain</label>
            <input 
              type="text" 
              placeholder="z.B. beispiel.de" 
              value={state.existingDomain} 
              onChange={(e) => updateState({ existingDomain: e.target.value })} 
              className="w-full p-6 bg-white border border-slate-100 rounded-[2rem] focus:outline-none focus:border-slate-900 transition-all duration-500 text-lg shadow-sm focus:shadow-xl" 
            />
          </div>
        </Reveal>
        <Reveal width="100%" delay={0.2}>
          <div className="space-y-4">
            <label className="block text-sm font-bold uppercase tracking-widest text-slate-400 ml-2">Wunsch-Domain</label>
            <input 
              type="text" 
              placeholder="z.B. neue-marke.de" 
              value={state.wishedDomain} 
              onChange={(e) => updateState({ wishedDomain: e.target.value })} 
              className="w-full p-6 bg-white border border-slate-100 rounded-[2rem] focus:outline-none focus:border-slate-900 transition-all duration-500 text-lg shadow-sm focus:shadow-xl" 
            />
          </div>
        </Reveal>
      </div>

      <Reveal width="100%" delay={0.3}>
        <div className="space-y-8">
          <div className="flex items-center gap-4">
            <div className="w-12 h-12 bg-slate-50 rounded-2xl flex items-center justify-center text-slate-900 shadow-sm">
              <Share2 size={24} />
            </div>
            <h4 className="text-2xl font-bold text-slate-900">Social Media Accounts</h4>
          </div>
          <p className="text-lg text-slate-500 ml-2">Welche Kanäle nutzen Sie bereits? Bitte geben Sie die URLs an.</p>
          <div className="grid grid-cols-1 gap-4">
            {SOCIAL_PLATFORMS.map((option, index) => {
              const isSelected = state.socialMedia.includes(option.id);
              return (
                <motion.div 
                  key={option.id}
                  className={`p-6 rounded-[2.5rem] border-2 transition-all duration-500 ${
                    isSelected ? 'border-slate-900 bg-slate-50 shadow-md' : 'border-slate-100 bg-white hover:border-slate-300'
                  }`}
                >
                  <div className="flex flex-col gap-4">
                    <div className="flex items-center justify-between">
                      <Checkbox 
                        label={option.label} 
                        desc="" 
                        checked={isSelected} 
                        onChange={() => updateState({ socialMedia: toggleItem(state.socialMedia, option.id) })} 
                      />
                    </div>
                    <AnimatePresence>
                      {isSelected && (
                        <motion.div 
                          initial={{ opacity: 0, height: 0 }}
                          animate={{ opacity: 1, height: 'auto' }}
                          exit={{ opacity: 0, height: 0 }}
                          className="overflow-hidden"
                        >
                          <div className="relative group/input pt-2">
                            <div className="absolute left-5 top-[calc(50%+4px)] -translate-y-1/2 text-slate-300 group-focus-within/input:text-slate-900 transition-colors">
                              <Link2 size={18} />
                            </div>
                            <input 
                              type="url" 
                              placeholder={`URL zu Ihrem ${option.label} Profil`} 
                              value={state.socialMediaUrls[option.id] || ''} 
                              onChange={(e) => updateUrl(option.id, e.target.value)} 
                              className="w-full p-4 pl-14 bg-white border border-slate-200 rounded-2xl focus:outline-none focus:border-slate-900 transition-all duration-300 text-base shadow-inner" 
                            />
                          </div>
                        </motion.div>
                      )}
                    </AnimatePresence>
                  </div>
                </motion.div>
              );
            })}
          </div>
        </div>
      </Reveal>
    </div>
  );
}
