'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';

interface RefItem {
  url: string;
  mode: 'html' | 'full';
  status?: 'pending' | 'scraping' | 'done' | 'error';
  extracted?: {
    palette: string[];
    fonts: string[];
    sections_detected: string[];
  };
  error?: string;
}

export default function HomePage() {
  const router = useRouter();
  const [description, setDescription] = useState('');
  const [stack, setStack] = useState('');
  const [extraNotes, setExtraNotes] = useState('');
  const [refs, setRefs] = useState<RefItem[]>([]);
  const [newUrl, setNewUrl] = useState('');
  const [newMode, setNewMode] = useState<'html' | 'full'>('html');
  const [moodboardInput, setMoodboardInput] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function addRef() {
    if (!newUrl.trim()) return;
    if (!/^https?:\/\//.test(newUrl)) {
      setError('URL must start with http:// or https://');
      return;
    }
    setError(null);
    const url = newUrl.trim();
    const mode = newMode;
    const idx = refs.length;
    setRefs((r) => [...r, { url, mode, status: 'scraping' }]);
    setNewUrl('');

    try {
      const res = await fetch('/api/references', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ url, mode }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error);
      setRefs((r) =>
        r.map((item, i) =>
          i === idx
            ? { ...item, status: 'done', extracted: data.extracted }
            : item
        )
      );
    } catch (err: any) {
      setRefs((r) =>
        r.map((item, i) =>
          i === idx ? { ...item, status: 'error', error: err.message } : item
        )
      );
    }
  }

  function removeRef(i: number) {
    setRefs((r) => r.filter((_, idx) => idx !== i));
  }

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault();
    setLoading(true);
    setError(null);
    try {
      const moodboard = moodboardInput
        .split(/[\n,]/)
        .map((s) => s.trim())
        .filter(Boolean);
      const res = await fetch('/api/enhance', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          description,
          stack: stack || undefined,
          extra_notes: extraNotes || undefined,
          references: refs
            .filter((r) => r.status === 'done')
            .map((r) => ({
              url: r.url,
              mode: r.mode,
              extracted: r.extracted,
            })),
          moodboard_urls: moodboard,
        }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || 'Failed');
      router.push(`/project/${data.projectId}/enhance`);
    } catch (err: any) {
      setError(err.message);
      setLoading(false);
    }
  }

  return (
    <main className="grain min-h-screen flex items-center justify-center px-6 py-16">
      <div className="w-full max-w-3xl">
        <div className="mb-12 text-center">
          <p className="font-mono text-xs uppercase tracking-[0.3em] text-[var(--accent)] mb-4">
            multi-agent website studio
          </p>
          <h1 className="font-display text-5xl md:text-6xl font-light leading-[1.05] text-white mb-4">
            Describe your site.
            <br />
            <span className="italic text-neutral-400">We design the rest.</span>
          </h1>
          <p className="text-neutral-500 text-sm max-w-md mx-auto">
            Claude plans &amp; codes. ChatGPT illustrates. Gemini animates. You direct.
          </p>
        </div>

        <form onSubmit={onSubmit} className="space-y-6">
          <div>
            <label className="block font-mono text-xs uppercase tracking-wider text-neutral-500 mb-2">
              What are you building?
            </label>
            <textarea
              required
              minLength={10}
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              rows={4}
              placeholder="A portfolio site for my photography business — weddings and editorial, cinematic, dark."
              className="w-full bg-[var(--bg-elev)] border border-[var(--border)] rounded-2xl px-5 py-4 text-neutral-100 placeholder:text-neutral-600 focus:border-[var(--accent)] focus:outline-none"
            />
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label className="block font-mono text-xs uppercase tracking-wider text-neutral-500 mb-2">
                Stack preference
              </label>
              <select
                value={stack}
                onChange={(e) => setStack(e.target.value)}
                className="w-full bg-[var(--bg-elev)] border border-[var(--border)] rounded-2xl px-5 py-4 text-neutral-100 focus:border-[var(--accent)] focus:outline-none"
              >
                <option value="">Let Claude decide</option>
                <option value="static">Static HTML/CSS/JS</option>
                <option value="nextjs-tailwind">Next.js + Tailwind</option>
                <option value="react-vite">React + Vite</option>
              </select>
            </div>
            <div>
              <label className="block font-mono text-xs uppercase tracking-wider text-neutral-500 mb-2">
                Extra notes
              </label>
              <input
                type="text"
                value={extraNotes}
                onChange={(e) => setExtraNotes(e.target.value)}
                placeholder="dark mode, brand colors, etc."
                className="w-full bg-[var(--bg-elev)] border border-[var(--border)] rounded-2xl px-5 py-4 text-neutral-100 placeholder:text-neutral-600 focus:border-[var(--accent)] focus:outline-none"
              />
            </div>
          </div>

          {/* Reference URLs */}
          <div className="bg-[var(--bg-elev)] border border-[var(--border)] rounded-2xl p-5">
            <label className="block font-mono text-xs uppercase tracking-wider text-[var(--accent)] mb-3">
              Reference websites <span className="text-neutral-500 normal-case">(scrape for inspiration)</span>
            </label>
            <div className="flex gap-2 mb-3">
              <input
                type="url"
                value={newUrl}
                onChange={(e) => setNewUrl(e.target.value)}
                onKeyDown={(e) => e.key === 'Enter' && (e.preventDefault(), addRef())}
                placeholder="https://example.com"
                className="flex-1 bg-transparent border border-[var(--border)] rounded-xl px-4 py-2 text-sm text-neutral-100 placeholder:text-neutral-600 focus:border-[var(--accent)] focus:outline-none"
              />
              <select
                value={newMode}
                onChange={(e) => setNewMode(e.target.value as any)}
                className="bg-transparent border border-[var(--border)] rounded-xl px-3 py-2 text-sm text-neutral-300 focus:outline-none"
              >
                <option value="html">HTML only</option>
                <option value="full">HTML + screenshot</option>
              </select>
              <button
                type="button"
                onClick={addRef}
                className="px-4 py-2 rounded-xl border border-[var(--border)] text-sm text-neutral-300 hover:text-white hover:border-neutral-500"
              >
                Scrape
              </button>
            </div>
            {refs.length > 0 && (
              <div className="space-y-2">
                {refs.map((r, i) => (
                  <div
                    key={i}
                    className="flex items-start gap-3 p-3 rounded-xl bg-black/30 border border-[var(--border)] text-xs"
                  >
                    <span className="font-mono text-neutral-500 mt-0.5">
                      {r.status === 'scraping' ? '⏳' : r.status === 'error' ? '✗' : '✓'}
                    </span>
                    <div className="flex-1 min-w-0">
                      <div className="text-neutral-200 truncate">{r.url}</div>
                      {r.extracted && (
                        <div className="mt-2 space-y-1.5">
                          {r.extracted.palette.length > 0 && (
                            <div className="flex items-center gap-2">
                              <span className="font-mono text-[10px] text-neutral-500 w-14">colors</span>
                              <div className="flex gap-1">
                                {r.extracted.palette.slice(0, 6).map((c) => (
                                  <span
                                    key={c}
                                    title={c}
                                    className="w-5 h-5 rounded border border-[var(--border)]"
                                    style={{ background: c }}
                                  />
                                ))}
                              </div>
                            </div>
                          )}
                          {r.extracted.fonts.length > 0 && (
                            <div className="flex items-center gap-2">
                              <span className="font-mono text-[10px] text-neutral-500 w-14">fonts</span>
                              <span className="text-neutral-400 text-[11px]">
                                {r.extracted.fonts.slice(0, 4).join(', ')}
                              </span>
                            </div>
                          )}
                          {r.extracted.sections_detected.length > 0 && (
                            <div className="flex items-center gap-2">
                              <span className="font-mono text-[10px] text-neutral-500 w-14">sections</span>
                              <span className="text-neutral-400 text-[11px]">
                                {r.extracted.sections_detected.join(', ')}
                              </span>
                            </div>
                          )}
                        </div>
                      )}
                      {r.error && <div className="text-red-400 mt-1">{r.error}</div>}
                    </div>
                    <button
                      type="button"
                      onClick={() => removeRef(i)}
                      className="text-neutral-600 hover:text-red-400 text-lg leading-none"
                    >
                      ×
                    </button>
                  </div>
                ))}
              </div>
            )}
          </div>

          {/* Moodboard URLs */}
          <div>
            <label className="block font-mono text-xs uppercase tracking-wider text-neutral-500 mb-2">
              Moodboard URLs (optional) — one per line
            </label>
            <textarea
              value={moodboardInput}
              onChange={(e) => setMoodboardInput(e.target.value)}
              rows={2}
              placeholder="https://imgur.com/...&#10;https://dribbble.com/..."
              className="w-full bg-[var(--bg-elev)] border border-[var(--border)] rounded-2xl px-5 py-3 text-sm text-neutral-100 placeholder:text-neutral-600 focus:border-[var(--accent)] focus:outline-none"
            />
          </div>

          {error && (
            <div className="rounded-2xl border border-red-900/50 bg-red-950/30 px-5 py-3 text-sm text-red-300">
              {error}
            </div>
          )}

          <button
            type="submit"
            disabled={loading}
            className="w-full bg-[var(--accent)] text-[var(--bg)] font-medium tracking-wide px-8 py-4 rounded-2xl hover:bg-[#e5c14c] transition-colors disabled:opacity-50"
          >
            {loading ? 'Enriching brief…' : 'Generate enriched brief →'}
          </button>
        </form>

        <div className="mt-12 font-mono text-[10px] uppercase tracking-[0.25em] text-neutral-700 text-center">
          stage 1 of 7 — brief intake
        </div>
      </div>
    </main>
  );
}