// =============================================================
// CheckInput.jsx — チェック入力画面（多ステップフォーム）
// =============================================================

const { useState, useMemo, useCallback, useRef } = React;
const { ArrowLeft, CheckCircle, Camera, X } = window.LucideReact;

// ─── 写真サムネイル ──────────────────────────────────────────

const PhotoRow = ({ photos, onChange }) => {
  const fileRef = useRef(null);

  const addPhotos = (e) => {
    const files = Array.from(e.target.files);
    const added = files.slice(0, 5 - photos.length).map(f => ({
      id: Date.now() + Math.random(),
      name: f.name,
      preview: URL.createObjectURL(f),
    }));
    onChange([...photos, ...added]);
    e.target.value = '';
  };

  const remove = (id) => onChange(photos.filter(p => p.id !== id));

  return (
    <div>
      <p className="text-[11px] font-semibold text-slate-500 mb-1.5">写真 ({photos.length}/5)</p>
      <div className="flex flex-wrap gap-2">
        {photos.map(p => (
          <div key={p.id} className="relative w-14 h-14 rounded-lg overflow-hidden border border-slate-200 flex-shrink-0">
            <img src={p.preview} alt={p.name} className="w-full h-full object-cover" />
            <button
              onClick={() => remove(p.id)}
              className="absolute top-0.5 right-0.5 w-4 h-4 bg-black/60 rounded-full flex items-center justify-center"
            >
              <X size={9} className="text-white" />
            </button>
          </div>
        ))}
        {photos.length < 5 && (
          <button
            onClick={() => fileRef.current?.click()}
            className="w-14 h-14 rounded-lg border-2 border-dashed border-slate-300 flex flex-col items-center justify-center gap-0.5 text-slate-400 hover:border-indigo-300 hover:text-indigo-400 transition-colors flex-shrink-0"
          >
            <Camera size={15} />
            <span className="text-[9px]">追加</span>
          </button>
        )}
        <input ref={fileRef} type="file" accept="image/*" multiple className="hidden" onChange={addPhotos} />
      </div>
    </div>
  );
};

// ─── チェック項目行 ──────────────────────────────────────────

const CheckItemRow = ({ item, result, ngDetail, onResultChange, onNgDetailChange }) => {
  const isOk = result === 'OK';
  const isNg = result === 'NG';
  const commentLen = (ngDetail?.comment || '').length;

  return (
    <div className="py-3.5">
      {/* 項目名 + OK/NG ボタン */}
      <div className="flex items-center gap-2">
        <span className="flex-1 text-sm text-slate-700 leading-snug">{item.name}</span>
        <div className="flex gap-1.5 flex-shrink-0">
          <button
            onClick={() => onResultChange(item.id, 'OK')}
            className={`w-12 py-1.5 rounded-lg text-xs font-bold border-2 transition-all ${
              isOk ? 'bg-green-500 border-green-500 text-white shadow-sm' : 'border-slate-200 text-slate-400 bg-white'
            }`}
          >OK</button>
          <button
            onClick={() => onResultChange(item.id, 'NG')}
            className={`w-12 py-1.5 rounded-lg text-xs font-bold border-2 transition-all ${
              isNg ? 'bg-red-500 border-red-500 text-white shadow-sm' : 'border-slate-200 text-slate-400 bg-white'
            }`}
          >NG</button>
        </div>
      </div>

      {/* NG詳細入力 */}
      {isNg && (
        <div className="mt-3 p-3 bg-red-50 rounded-xl space-y-3 border border-red-100">
          {/* コメント */}
          <div>
            <div className="flex items-center justify-between mb-1">
              <span className="text-[11px] font-bold text-red-600">不具合内容（必須）</span>
              <span className={`text-[10px] font-medium ${commentLen > 450 ? 'text-red-500' : 'text-slate-400'}`}>
                {commentLen}/500
              </span>
            </div>
            <textarea
              value={ngDetail?.comment || ''}
              onChange={e => onNgDetailChange(item.id, 'comment', e.target.value)}
              maxLength={500}
              rows={3}
              placeholder="不具合の詳細を入力してください..."
              className="w-full text-xs border border-red-200 rounded-xl p-2.5 resize-none outline-none focus:ring-2 focus:ring-red-300 focus:border-red-400 bg-white leading-relaxed"
            />
          </div>
          {/* 写真 */}
          <PhotoRow
            photos={ngDetail?.photos || []}
            onChange={photos => onNgDetailChange(item.id, 'photos', photos)}
          />
        </div>
      )}
    </div>
  );
};

// ─── 確認ダイアログ ──────────────────────────────────────────

const CheckConfirmDialog = ({ area, checkDate, startTime, results, areaItems, saving, onSave, onClose }) => {
  const okCount = Object.values(results).filter(v => v === 'OK').length;
  const ngCount = Object.values(results).filter(v => v === 'NG').length;

  return (
    <div className="fixed inset-0 z-[100] flex items-end sm:items-center justify-center p-4">
      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={onClose} />
      <div className="relative bg-white rounded-3xl shadow-2xl w-full max-w-sm p-6">
        <h3 className="font-bold text-slate-800 text-base mb-1">入力内容の確認</h3>
        <p className="text-xs text-slate-400 mb-5">以下の内容で保存してよいですか？</p>

        <div className="bg-slate-50 rounded-2xl p-4 space-y-3 mb-5">
          <div className="flex justify-between text-sm">
            <span className="text-slate-500">エリア</span>
            <span className="font-semibold text-slate-800">{area?.name}</span>
          </div>
          <div className="flex justify-between text-sm">
            <span className="text-slate-500">実施日時</span>
            <span className="font-semibold text-slate-800">{checkDate} {startTime}</span>
          </div>
          <div className="flex justify-between text-sm items-center">
            <span className="text-slate-500">チェック結果</span>
            <div className="flex gap-2">
              <span className="font-bold text-green-600 text-xs bg-green-100 px-2 py-0.5 rounded-full">OK {okCount}件</span>
              {ngCount > 0 && (
                <span className="font-bold text-red-600 text-xs bg-red-100 px-2 py-0.5 rounded-full">NG {ngCount}件</span>
              )}
            </div>
          </div>
        </div>

        <div className="flex gap-2.5">
          <button
            onClick={onClose}
            className="flex-1 py-3 border border-slate-200 rounded-2xl text-sm font-semibold text-slate-600 hover:bg-slate-50 transition-colors"
          >
            修正する
          </button>
          <button
            onClick={onSave}
            disabled={saving}
            className="flex-1 py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-2xl text-sm font-bold transition-colors disabled:opacity-50"
          >
            {saving ? '保存中...' : '保存する'}
          </button>
        </div>
      </div>
    </div>
  );
};

// ─── メインコンポーネント ────────────────────────────────────

const CheckInput = ({ appData, navigate, refreshData }) => {
  const today     = new Date();
  const todayStr  = today.toISOString().split('T')[0];
  const nowTime   = `${String(today.getHours()).padStart(2,'0')}:${String(today.getMinutes()).padStart(2,'0')}`;

  const [step,       setStep]       = useState('select');
  const [areaId,     setAreaId]     = useState('');
  const [checkDate,  setCheckDate]  = useState(todayStr);
  const [startTime,  setStartTime]  = useState(nowTime);
  const [results,    setResults]    = useState({});
  const [ngData,     setNgData]     = useState({});
  const [showConfirm, setShowConfirm] = useState(false);
  const [showToast,   setShowToast]   = useState(false);
  const [saving,      setSaving]      = useState(false);

  // エリア一覧（センター1）
  const myAreas = useMemo(() => window.MASTER_AREAS.filter(a => a.center_id === 1 && a.is_active), []);

  // 選択エリアのチェック項目
  const areaItems = useMemo(() => {
    if (!areaId) return [];
    return window.MASTER_AREA_CHECK_ITEMS
      .filter(aci => aci.area_id === parseInt(areaId))
      .sort((a, b) => a.display_order - b.display_order);
  }, [areaId]);

  // カテゴリ別グループ
  const byCategory = useMemo(() => {
    const map = {};
    for (const aci of areaItems) {
      const item = window.MASTER_CHECK_ITEMS.find(i => i.id === aci.check_item_id);
      const cat  = item && window.MASTER_CHECK_CATEGORIES.find(c => c.id === item.category_id);
      if (!item || !cat) continue;
      if (!map[cat.id]) map[cat.id] = { category: cat, items: [] };
      map[cat.id].items.push(item);
    }
    return Object.values(map).sort((a, b) => a.category.display_order - b.category.display_order);
  }, [areaItems]);

  // バリデーション
  const checkedCount = areaItems.filter(aci => results[aci.check_item_id]).length;
  const allChecked   = areaItems.length > 0 && checkedCount === areaItems.length;
  const ngItemIds    = areaItems.filter(aci => results[aci.check_item_id] === 'NG').map(aci => aci.check_item_id);
  const allNgFilled  = ngItemIds.every(id => (ngData[id]?.comment || '').trim().length > 0);
  const canConfirm   = allChecked && allNgFilled;

  const setResult = useCallback((itemId, val) => {
    setResults(prev => ({ ...prev, [itemId]: val }));
  }, []);

  const setNgDetail = useCallback((itemId, key, val) => {
    setNgData(prev => ({ ...prev, [itemId]: { ...(prev[itemId] || {}), [key]: val } }));
  }, []);

  // 保存処理
  const handleSave = () => {
    setSaving(true);
    const data = window.StorageUtils.get();

    const newRecId = Math.max(0, ...(data.checkRecords  || []).map(r => r.id)) + 1;
    let   resId    = Math.max(0, ...(data.checkResults  || []).map(r => r.id)) + 1;
    let   ngId     = Math.max(0, ...(data.ngDetails     || []).map(d => d.id)) + 1;

    const newRecord = {
      id: newRecId,
      user_id: 1,
      area_id: parseInt(areaId),
      check_date: checkDate,
      start_time: startTime,
      created_at: `${checkDate}T${startTime}:00`,
    };

    const newResults   = [];
    const newNgDetails = [];

    for (const aci of areaItems) {
      const res = { id: resId++, check_record_id: newRecId, check_item_id: aci.check_item_id, result: results[aci.check_item_id] };
      newResults.push(res);
      if (res.result === 'NG') {
        newNgDetails.push({
          id: ngId++,
          check_result_id: res.id,
          comment: (ngData[aci.check_item_id]?.comment || '').trim(),
          created_at: newRecord.created_at,
        });
      }
    }

    window.StorageUtils.update(d => ({
      ...d,
      checkRecords:  [...(d.checkRecords  || []), newRecord],
      checkResults:  [...(d.checkResults  || []), ...newResults],
      ngDetails:     [...(d.ngDetails     || []), ...newNgDetails],
    }));

    refreshData();
    setShowConfirm(false);
    setSaving(false);
    setShowToast(true);
    setTimeout(() => {
      setShowToast(false);
      navigate('CHECK_HISTORY_DETAIL', { recordId: newRecId });
    }, 1600);
  };

  // ─── Step 1: エリア・日付・時間選択 ──────────────────────
  if (step === 'select') {
    return (
      <div className="p-4">
        <h2 className="text-base font-bold text-slate-800 mb-4">チェック入力</h2>
        <div className="space-y-4">
          <div>
            <label className="block text-xs font-bold text-slate-500 mb-1.5">エリアを選択</label>
            <div className="relative">
              <select
                value={areaId}
                onChange={e => setAreaId(e.target.value)}
                className="w-full text-sm border border-slate-300 rounded-xl px-3 py-3 bg-white outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 appearance-none"
              >
                <option value="">エリアを選択してください</option>
                {myAreas.map(a => <option key={a.id} value={a.id}>{a.name}</option>)}
              </select>
            </div>
          </div>
          <div>
            <label className="block text-xs font-bold text-slate-500 mb-1.5">実施日</label>
            <input
              type="date"
              value={checkDate}
              onChange={e => setCheckDate(e.target.value)}
              className="w-full text-sm border border-slate-300 rounded-xl px-3 py-3 bg-white outline-none focus:ring-2 focus:ring-indigo-300"
            />
          </div>
          <div>
            <label className="block text-xs font-bold text-slate-500 mb-1.5">開始時間</label>
            <input
              type="time"
              value={startTime}
              onChange={e => setStartTime(e.target.value)}
              className="w-full text-sm border border-slate-300 rounded-xl px-3 py-3 bg-white outline-none focus:ring-2 focus:ring-indigo-300"
            />
          </div>
          <button
            onClick={() => setStep('check')}
            disabled={!areaId}
            className="w-full py-3.5 bg-indigo-600 disabled:bg-slate-200 disabled:text-slate-400 text-white font-bold rounded-2xl transition-colors mt-2 text-sm"
          >
            チェック入力へ →
          </button>
        </div>
      </div>
    );
  }

  // ─── Step 2: チェック入力 ─────────────────────────────────
  const area = myAreas.find(a => a.id === parseInt(areaId));
  const pct  = areaItems.length ? (checkedCount / areaItems.length) * 100 : 0;

  return (
    <div className="min-h-full">
      {/* サブヘッダー */}
      <div className="sticky top-0 bg-white border-b border-slate-200 z-10">
        <div className="flex items-center gap-3 px-4 py-2.5">
          <button
            onClick={() => setStep('select')}
            className="w-8 h-8 rounded-full hover:bg-slate-100 flex items-center justify-center flex-shrink-0"
          >
            <ArrowLeft size={18} className="text-slate-600" />
          </button>
          <div className="flex-1 min-w-0">
            <p className="font-bold text-slate-800 text-sm truncate">{area?.name}</p>
            <p className="text-xs text-slate-500">{checkDate}　{startTime} 開始</p>
          </div>
          <span className="text-xs font-bold text-slate-500 bg-slate-100 px-2.5 py-1 rounded-full flex-shrink-0">
            {checkedCount} / {areaItems.length}
          </span>
        </div>
        {/* 進捗バー */}
        <div className="h-1 bg-slate-100">
          <div
            className="h-1 bg-indigo-500 transition-all duration-300"
            style={{ width: `${pct}%` }}
          />
        </div>
      </div>

      {/* カテゴリ別チェックリスト */}
      <div className="p-4 space-y-4 pb-28">
        {byCategory.map(({ category, items }) => (
          <div key={category.id} className="bg-white rounded-2xl border border-slate-200 overflow-hidden">
            <div className="px-4 py-2.5 bg-slate-50 border-b border-slate-100">
              <span className="text-xs font-bold text-slate-600">{category.name}</span>
            </div>
            <div className="divide-y divide-slate-100 px-4">
              {items.map(item => (
                <CheckItemRow
                  key={item.id}
                  item={item}
                  result={results[item.id]}
                  ngDetail={ngData[item.id]}
                  onResultChange={setResult}
                  onNgDetailChange={setNgDetail}
                />
              ))}
            </div>
          </div>
        ))}
      </div>

      {/* 確認ボタン（固定フッター） */}
      <div className="fixed bottom-16 md:bottom-0 inset-x-0 md:left-52 px-4 pb-3 pt-6 bg-gradient-to-t from-slate-50 via-slate-50/90 to-transparent pointer-events-none">
        <button
          onClick={() => setShowConfirm(true)}
          disabled={!canConfirm}
          className="w-full py-3.5 bg-indigo-600 disabled:bg-slate-200 disabled:text-slate-400 text-white font-bold rounded-2xl text-sm shadow-lg transition-colors pointer-events-auto"
        >
          {!allChecked
            ? `残り ${areaItems.length - checkedCount} 件を入力してください`
            : !allNgFilled
            ? 'NG 項目のコメントを入力してください'
            : '入力内容を確認する'}
        </button>
      </div>

      {/* 確認ダイアログ */}
      {showConfirm && (
        <CheckConfirmDialog
          area={area}
          checkDate={checkDate}
          startTime={startTime}
          results={results}
          areaItems={areaItems}
          saving={saving}
          onSave={handleSave}
          onClose={() => setShowConfirm(false)}
        />
      )}

      {/* Toast */}
      {showToast && (
        <div className="fixed bottom-20 md:bottom-4 inset-x-0 md:left-52 flex justify-center z-[300] px-4 pointer-events-none">
          <div className="bg-green-600 text-white px-5 py-2.5 rounded-2xl shadow-xl flex items-center gap-2 text-sm font-semibold">
            <CheckCircle size={16} />
            チェックを保存しました
          </div>
        </div>
      )}
    </div>
  );
};

Object.assign(window, { CheckInput });