'use client';

import React, { useState } from 'react';
import { X, Sparkles, CheckCircle2, RotateCcw, MessageSquare } from 'lucide-react';
import { calculateBazi, getStaticBaziInterpretation } from '@/lib/bazi/calculator';
import { BaziCalculationResult, BaziInterpretation, ElementType } from '@/lib/bazi/types';
import { ELEMENT_COLORS } from '@/lib/bazi/stems';
import { ELEMENT_INFO, PILLAR_GUIDE, STRENGTH_INFO } from '@/lib/bazi/guide';
import { shioName } from '@/lib/bazi/shio';
import { useLocale, useMessages } from '@/i18n/client';

interface BaziAssessmentModalProps {
  isOpen: boolean;
  onClose: () => void;
  onOpenChat?: () => void;
  onComplete?: (result: BaziCalculationResult) => void;
  /** Pre-fills the form, e.g. with the signed-in user's name. */
  initial?: { name?: string; birthDate?: string };
}

export const BaziAssessmentModal: React.FC<BaziAssessmentModalProps> = ({
  isOpen,
  onClose,
  onOpenChat,
  onComplete,
  initial,
}) => {
  const locale = useLocale();
  const m = useMessages();
  const all = m.assess;
  const t = all.bazi;
  const el = ELEMENT_INFO[locale];
  const [name, setName] = useState(initial?.name ?? '');
  const [gender, setGender] = useState<'male' | 'female'>('male');
  const [birthDate, setBirthDate] = useState(initial?.birthDate ?? '');
  const [birthTime, setBirthTime] = useState('');
  const [birthCity, setBirthCity] = useState('Jakarta');
  const [timezone, setTimezone] = useState('Asia/Jakarta');

  const [result, setResult] = useState<BaziCalculationResult | null>(null);
  const [interpretation, setInterpretation] = useState<BaziInterpretation | null>(null);
  const [isAnalyzing, setIsAnalyzing] = useState(false);

  if (!isOpen) return null;

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsAnalyzing(true);
    try {
      const res = await fetch('/api/bazi/calculate', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ birthDate, birthTime, timezone, name, gender, birthCity }),
      });
      const json = await res.json();
      if (json.success && json.data) {
        setResult(json.data);
        setInterpretation(json.data.interpretation);
        onComplete?.({ ...json.data, input: { birthDate, birthTime, gender } });
      } else {
        throw new Error('Fallback');
      }
    } catch {
      const calcResult = calculateBazi(birthDate, birthTime, timezone);
      const interp = getStaticBaziInterpretation(calcResult, locale);
      setResult(calcResult);
      setInterpretation(interp);
      onComplete?.({ ...calcResult, input: { birthDate, birthTime, gender } });
    } finally {
      setIsAnalyzing(false);
    }
  };

  const handleReset = () => {
    setResult(null);
    setInterpretation(null);
  };

  const elementList: ElementType[] = ['Wood', 'Fire', 'Earth', 'Metal', 'Water'];

  return (
    <div className="fixed inset-0 z-50 flex items-start justify-center p-4 bg-black/80 backdrop-blur-md animate-fade-in overflow-y-auto">
      <div className="relative w-full max-w-4xl bg-white rounded-3xl overflow-hidden shadow-2xl text-slate-900 my-auto min-h-[560px] flex flex-col">
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-slate-100 bg-slate-50/50">
          <div className="flex items-center gap-2">
            <span className="w-2.5 h-2.5 rounded-full bg-emerald-500" />
            <span className="text-xs font-bold uppercase tracking-wider text-slate-500">
              {t.header}
            </span>
          </div>

          <button
            onClick={onClose}
            className="w-8 h-8 rounded-full bg-slate-200/60 hover:bg-slate-200 text-slate-700 flex items-center justify-center transition-colors"
          >
            <X className="w-4 h-4" />
          </button>
        </div>

        {/* Loading State */}
        {isAnalyzing && (
          <div className="flex-1 flex flex-col items-center justify-center p-12 text-center space-y-4">
            <div className="w-16 h-16 rounded-full border-4 border-emerald-500/20 border-t-emerald-500 animate-spin" />
            <h3 className="text-xl font-bold text-slate-900">
              {t.analyzing}
            </h3>
            <p className="text-sm text-slate-500 max-w-sm">
              {t.analyzingText}
            </p>
          </div>
        )}

        {/* Form State */}
        {!isAnalyzing && !result && (
          <div className="flex-1 p-8 sm:p-12 max-w-xl mx-auto w-full flex flex-col justify-center">
            <div className="mb-8 text-center space-y-2">
              <span className="text-xs font-bold uppercase tracking-wider text-emerald-600">
                {t.eyebrow}
              </span>
              <h3 className="text-2xl sm:text-3xl font-bold text-slate-900">
                {t.title}
              </h3>
              <p className="text-xs sm:text-sm text-slate-500">
                {t.text}
              </p>
            </div>

            <form onSubmit={handleSubmit} className="space-y-4">
              <div>
                <label className="block text-xs font-bold uppercase tracking-wider text-slate-600 mb-1.5">
                  {t.name}
                </label>
                <input
                  type="text"
                  required
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  className="w-full px-4 py-3 rounded-2xl border border-slate-200 text-sm focus:outline-none focus:border-emerald-500 transition-colors"
                />
              </div>

              <div>
                <span className="block text-xs font-bold uppercase tracking-wider text-slate-600 mb-1.5">
                  {t.gender}
                </span>
                <div className="grid grid-cols-2 gap-2" role="radiogroup" aria-label={t.gender}>
                  {(
                    [
                      ['male', t.male],
                      ['female', t.female],
                    ] as const
                  ).map(([value, label]) => (
                    <button
                      key={value}
                      type="button"
                      role="radio"
                      aria-checked={gender === value}
                      onClick={() => setGender(value)}
                      className={`py-3 rounded-2xl border text-sm font-medium transition-colors ${
                        gender === value
                          ? 'border-emerald-500 bg-emerald-50 text-emerald-700'
                          : 'border-slate-200 text-slate-600 hover:border-slate-300'
                      }`}
                    >
                      {label}
                    </button>
                  ))}
                </div>
                <p className="mt-1.5 text-[11px] text-slate-400">
                  {t.genderHint}
                </p>
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-xs font-bold uppercase tracking-wider text-slate-600 mb-1.5">
                    {t.birthDate}
                  </label>
                  <input
                    type="date"
                    required
                    value={birthDate}
                    onChange={(e) => setBirthDate(e.target.value)}
                    className="w-full px-4 py-3 rounded-2xl border border-slate-200 text-sm focus:outline-none focus:border-emerald-500 transition-colors"
                  />
                </div>

                <div>
                  <label className="block text-xs font-bold uppercase tracking-wider text-slate-600 mb-1.5">
                    {t.birthTime}
                  </label>
                  <input
                    type="time"
                    required
                    value={birthTime}
                    onChange={(e) => setBirthTime(e.target.value)}
                    className="w-full px-4 py-3 rounded-2xl border border-slate-200 text-sm focus:outline-none focus:border-emerald-500 transition-colors"
                  />
                </div>
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-xs font-bold uppercase tracking-wider text-slate-600 mb-1.5">
                    {t.city}
                  </label>
                  <input
                    type="text"
                    required
                    value={birthCity}
                    onChange={(e) => setBirthCity(e.target.value)}
                    className="w-full px-4 py-3 rounded-2xl border border-slate-200 text-sm focus:outline-none focus:border-emerald-500 transition-colors"
                  />
                </div>

                <div>
                  <label className="block text-xs font-bold uppercase tracking-wider text-slate-600 mb-1.5">
                    {t.timezone}
                  </label>
                  <select
                    value={timezone}
                    onChange={(e) => setTimezone(e.target.value)}
                    className="w-full px-4 py-3 rounded-2xl border border-slate-200 text-sm focus:outline-none focus:border-emerald-500 transition-colors bg-white"
                  >
                    <option value="Asia/Jakarta">WIB (UTC+7)</option>
                    <option value="Asia/Makassar">WITA (UTC+8)</option>
                    <option value="Asia/Jayapura">WIT (UTC+9)</option>
                  </select>
                </div>
              </div>

              <button
                type="submit"
                className="w-full mt-4 py-3.5 rounded-full bg-[#07111F] text-white font-bold text-sm hover:bg-slate-800 transition-colors shadow-lg"
              >
                {t.submit}
              </button>
            </form>
          </div>
        )}

        {/* Results State */}
        {!isAnalyzing && result && interpretation && (
          <div className="flex-1 p-6 sm:p-10 space-y-8 overflow-y-auto">
            <div className="bg-[#07111F] rounded-3xl p-8 text-white flex flex-col md:flex-row items-center justify-between gap-8 shadow-xl">
              <div className="space-y-2 text-center md:text-left">
                <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-white/10 text-xs text-emerald-400 font-semibold">
                  <Sparkles className="w-3.5 h-3.5" />
                  <span>{t.badge}</span>
                </div>
                <h3 className="text-3xl sm:text-4xl font-extrabold tracking-tight">
                  {m.insights.polarity[result.dayMaster.polarity]} {el[result.dayMaster.element].name} ({result.dayMaster.stem.chinese})
                </h3>
                <p className="text-slate-400 text-sm max-w-md">
                  {t.strength} <span className="text-white font-semibold">{STRENGTH_INFO[locale][result.dayMaster.strength].label}</span> • {t.dominantElement} <span className="text-white font-semibold">{el[result.dominantElement].name}</span>
                </p>
              </div>

              <div className="w-24 h-24 rounded-2xl bg-white/10 border border-white/20 flex flex-col items-center justify-center text-center">
                <span className="text-4xl font-extrabold text-white">
                  {result.dayMaster.stem.chinese}
                </span>
                <span className="text-[10px] text-slate-300 uppercase tracking-wider font-semibold mt-1">
                  {result.dayMaster.stem.pinyin}
                </span>
              </div>
            </div>

            <div className="p-6 rounded-3xl bg-slate-50 border border-slate-200 space-y-4">
              <div className="flex justify-between items-center">
                <h4 className="text-xs font-bold uppercase tracking-wider text-slate-500">
                  {t.pillars}
                </h4>
                <span className="text-xs font-medium text-slate-400">Engine v{result.version}</span>
              </div>

              <div className="grid grid-cols-4 gap-3 text-center">
                {['year', 'month', 'day', 'hour'].map((key) => {
                  const p = result.fourPillars[key as keyof typeof result.fourPillars];
                  return (
                    <div key={key} className="space-y-2">
                      <span className="text-xs font-bold text-slate-400 uppercase">
                        {PILLAR_GUIDE[locale][key as keyof typeof result.fourPillars].label}
                      </span>
                      <div className="p-3 rounded-2xl bg-white border border-slate-200 shadow-sm flex flex-col items-center">
                        <span className="text-2xl font-bold text-slate-900">
                          {p.stem.chinese}
                        </span>
                        <span className="text-[10px] text-slate-500 font-medium">
                          {m.insights.polarity[p.stem.polarity]} {el[p.stem.element].name}
                        </span>
                      </div>
                      <div className="p-3 rounded-2xl bg-white border border-slate-200 shadow-sm flex flex-col items-center">
                        <span className="text-2xl font-bold text-slate-900">
                          {p.branch.chinese}
                        </span>
                        <span className="text-[10px] text-slate-500 font-medium">
                          {shioName(p.branch.chinese, locale)}
                        </span>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>

            <div className="p-6 rounded-3xl bg-slate-50 border border-slate-200 space-y-3">
              <h4 className="text-xs font-bold uppercase tracking-wider text-slate-500">
                {t.elements}
              </h4>
              <div className="space-y-2.5">
                {elementList.map((element) => {
                  const score = result.elements[element];
                  const col = ELEMENT_COLORS[element];
                  return (
                    <div key={element} className="space-y-1">
                      <div className="flex justify-between items-center text-xs font-semibold text-slate-700">
                        <span>{el[element].name}</span>
                        <span className="font-mono text-slate-500">{score}</span>
                      </div>
                      <div className="h-2 w-full bg-slate-200 rounded-full overflow-hidden">
                        <div
                          className="h-full rounded-full transition-all duration-700"
                          style={{
                            width: `${score}%`,
                            backgroundColor: col.bar,
                          }}
                        />
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>

            <div className="p-6 rounded-3xl bg-white border border-slate-200 space-y-4">
              <h4 className="text-sm font-bold text-slate-900 flex items-center gap-2">
                <CheckCircle2 className="w-4 h-4 text-emerald-500" />
                {t.personality}
              </h4>
              <p className="text-sm text-slate-600 leading-relaxed">
                {interpretation.personality}
              </p>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-2">
                <div className="p-4 rounded-2xl bg-slate-50 border border-slate-100">
                  <span className="text-xs font-bold uppercase text-slate-500 block mb-1">
                    {t.mainStrengths}
                  </span>
                  <ul className="text-xs text-slate-600 space-y-1">
                    {interpretation.strengths.map((s, idx) => (
                      <li key={idx}>• {s}</li>
                    ))}
                  </ul>
                </div>
                <div className="p-4 rounded-2xl bg-slate-50 border border-slate-100">
                  <span className="text-xs font-bold uppercase text-slate-500 block mb-1">
                    {t.career}
                  </span>
                  <p className="text-xs text-slate-600">{interpretation.career}</p>
                </div>
              </div>
            </div>

            <div className="flex flex-wrap items-center justify-between gap-3 pt-4 border-t border-slate-200">
              <button
                onClick={handleReset}
                className="flex items-center gap-2 text-xs font-semibold text-slate-500 hover:text-slate-800"
              >
                <RotateCcw className="w-3.5 h-3.5" />
                <span>{all.recalc}</span>
              </button>

              <div className="flex items-center gap-2">
                {onOpenChat && (
                  <button
                    onClick={() => {
                      onClose();
                      onOpenChat();
                    }}
                    className="px-5 py-2.5 rounded-full bg-emerald-600 text-white text-xs font-bold hover:bg-emerald-700 transition-colors flex items-center gap-1.5 shadow-md"
                  >
                    <MessageSquare className="w-3.5 h-3.5" />
                    <span>{all.consult}</span>
                  </button>
                )}
                <button
                  onClick={onClose}
                  className="px-6 py-2.5 rounded-full bg-[#07111F] text-white text-xs font-bold hover:bg-slate-800 transition-colors"
                >
                  {all.done}
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};