// =============================================================
// AdminCorrection.jsx — 是正指示一覧（管理者）/ 作成 / 結果確認
// =============================================================

const { useState: useStateACorr, useMemo: useMemoACorr } = React;
const { ArrowLeft: ArrowLeftAC, CheckCircle: CheckCircleAC, X: XAC, ChevronRight: ChevRightAC, FilePlus: FilePlusAC } = window.LucideReact;

const AC_STATUS = {
  pending:   { label: '未対応',   badge: 'bg-red-100 text-red-700',     dot: 'bg-red-500'    },
  in_review: { label: '承認待ち', badge: 'bg-amber-100 text-amber-700', dot: 'bg-amber-400'  },
  resolved:  { label: '承認済',   badge: 'bg-green-100 text-green-700', dot: 'bg-green-500'  },
  rejected:  { label: '差戻し',   badge: 'bg-orange-100 text-orange-700', dot: 'bg-orange-500' },
};

const fmtAC = (d) => {
  if (!d) return '';
  const dt = new Date(d.includes('T') ? d : d + 'T00:00:00');
  return `${dt.getFullYear()}/${dt.getMonth() + 1}/${dt.getDate()}`;
};
const isOverdueAC = (deadline) => new Date(deadline + 'T23:59:59') < new Date();

// =============================================================
// 1. 是正指示一覧（管理者）
// =============================================================

const CorrectionListAdmin = ({ appData, navigate }) => {
  const [statusFilter, setStatusFilter] = useStateACorr('all');

  const orders = useMemoACorr(() => {
    const priority = { pending: 0, rejected: 1, in_review: 2, resolved: 3 };
    return [...(appData.correctionOrders || [])]
      .filter(o => statusFilter === 'all' || o.status === statusFilter)
      .sort((a, b) => {
        const pd = (priority[a.status] ?? 4) - (priority[b.status] ?? 4);
        return pd !== 0 ? pd : a.deadline.localeCompare(b.deadline);
      });
  }, [appData.correctionOrders, statusFilter]);

  const counts = useMemoACorr(() => {
    const all = appData.correctionOrders || [];
    const cnt = { all: all.length };
    Object.keys(AC_STATUS).forEach(s => { cnt[s] = all.filter(o => o.status === s).length; });
    return cnt;
  }, [appData.correctionOrders]);

  const filters = [
    { v: 'all',       l: `すべて (${counts.all})` },
    { v: 'pending',   l: `未対応 (${counts.pending})` },
    { v: 'rejected',  l: `差戻し (${counts.rejected})` },
    { v: 'in_review', l: `承認待ち (${counts.in_review})` },
    { v: 'resolved',  l: `承認済 (${counts.resolved})` },
  ];

  return (
    <div className="p-6 max-w-4xl space-y-5">
      <div className="flex items-center justify-between flex-wrap gap-3">
        <div>
          <h1 className="text-xl font-bold text-slate-800">是正指示一覧</h1>
          <p className="text-sm text-slate-500 mt-0.5">発行済み是正指示の管理</p>
        </div>
        <button
          onClick={() => navigate('CORRECTION_CREATE')}
          className="flex items-center gap-2 px-4 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl text-sm font-bold transition-colors"
        >
          <FilePlusAC size={15} />
          是正指示を作成
        </button>
      </div>

      {/* フィルタ */}
      <div className="flex gap-2 overflow-x-auto pb-1" style={{ WebkitOverflowScrolling: 'touch' }}>
        {filters.map(({ v, l }) => (
          <button
            key={v}
            onClick={() => setStatusFilter(v)}
            className={`flex-shrink-0 px-3 py-1.5 rounded-full text-xs font-semibold transition-all ${
              statusFilter === v
                ? 'bg-indigo-600 text-white'
                : 'bg-white border border-slate-200 text-slate-600 hover:border-indigo-300'
            }`}
          >
            {l}
          </button>
        ))}
      </div>

      {/* 一覧 */}
      <div className="space-y-2">
        {orders.length === 0 ? (
          <div className="bg-white rounded-2xl border border-slate-200 p-12 text-center text-slate-400">
            <p className="text-sm">該当する是正指示がありません</p>
          </div>
        ) : orders.map(order => {
          const cfg    = AC_STATUS[order.status] || AC_STATUS.pending;
          const center = window.MASTER_CENTERS.find(c => c.id === order.center_id);
          const over   = isOverdueAC(order.deadline) && order.status !== 'resolved';
          const reps   = (appData.correctionReports || []).filter(r => r.correction_order_id === order.id);
          const latest = [...reps].sort((a, b) => b.created_at.localeCompare(a.created_at))[0];

          return (
            <button
              key={order.id}
              onClick={() => navigate('CORRECTION_RESULT', { orderId: order.id })}
              className="w-full bg-white rounded-2xl border border-slate-200 p-4 text-left hover:border-indigo-200 hover:shadow-sm transition-all"
            >
              <div className="flex items-start justify-between gap-3 mb-2">
                <div className="flex items-center gap-2 flex-wrap">
                  <span className={`text-[11px] font-bold px-2 py-0.5 rounded-full ${cfg.badge}`}>{cfg.label}</span>
                  <span className="text-xs text-slate-500 font-medium">{center?.name}</span>
                </div>
                <span className={`text-[11px] font-semibold flex-shrink-0 ${over ? 'text-red-600' : 'text-slate-400'}`}>
                  期限 {order.deadline}{over ? ' ⚠超過' : ''}
                </span>
              </div>
              <p className="text-sm text-slate-700 leading-relaxed line-clamp-2 mb-2">{order.content}</p>
              <div className="flex items-center justify-between text-xs text-slate-400">
                <span>報告 {reps.length}件{latest ? `　最新: ${latest.review_status}` : ''}</span>
                <ChevRightAC size={14} className="text-slate-300" />
              </div>
            </button>
          );
        })}
      </div>
    </div>
  );
};

// =============================================================
// 2. 是正指示作成
// =============================================================

const CorrectionCreate = ({ appData, navigate, refreshData }) => {
  const [centerId,    setCenterId]    = useStateACorr('');
  const [content,     setContent]     = useStateACorr('');
  const [deadline,    setDeadline]    = useStateACorr('');
  const [showConfirm, setShowConfirm] = useStateACorr(false);
  const [showToast,   setShowToast]   = useStateACorr(false);
  const [saving,      setSaving]      = useStateACorr(false);

  const minDeadline = new Date();
  minDeadline.setDate(minDeadline.getDate() + 1);
  const minDeadlineStr = minDeadline.toISOString().split('T')[0];

  const canConfirm = centerId && content.trim().length > 0 && deadline;

  const handleSave = () => {
    setSaving(true);
    const data  = window.StorageUtils.get();
    const newId = Math.max(0, ...(data.correctionOrders || []).map(o => o.id)) + 1;
    const now   = new Date().toISOString().slice(0, 19);

    const newOrder = {
      id:         newId,
      created_by: 5,
      center_id:  parseInt(centerId),
      content:    content.trim(),
      deadline,
      status:     'pending',
      created_at: now,
      updated_at: now,
    };

    window.StorageUtils.update(d => ({
      ...d,
      correctionOrders: [...(d.correctionOrders || []), newOrder],
    }));
    refreshData();
    setSaving(false);
    setShowConfirm(false);
    setShowToast(true);
    setTimeout(() => {
      setShowToast(false);
      navigate('CORRECTION_LIST_ADMIN');
    }, 1600);
  };

  return (
    <div className="p-6 max-w-2xl">
      <div className="flex items-center gap-3 mb-6">
        <button onClick={() => navigate('CORRECTION_LIST_ADMIN')} className="w-8 h-8 rounded-full hover:bg-slate-100 flex items-center justify-center transition-colors">
          <ArrowLeftAC size={18} className="text-slate-600" />
        </button>
        <div>
          <h1 className="text-xl font-bold text-slate-800">是正指示作成</h1>
          <p className="text-sm text-slate-500 mt-0.5">新規是正指示を作成して送信します</p>
        </div>
      </div>

      <div className="bg-white rounded-2xl border border-slate-200 p-6 space-y-5">
        {/* センター */}
        <div>
          <label className="block text-xs font-bold text-slate-500 mb-1.5">対象センター</label>
          <select value={centerId} onChange={e => setCenterId(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">
            <option value="">センターを選択してください</option>
            {window.MASTER_CENTERS.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
          </select>
        </div>

        {/* 指示内容 */}
        <div>
          <div className="flex items-center justify-between mb-1.5">
            <label className="text-xs font-bold text-slate-500">指示内容（必須）</label>
            <span className={`text-[10px] font-medium ${content.length > 1800 ? 'text-red-500' : 'text-slate-400'}`}>
              {content.length}/2000
            </span>
          </div>
          <textarea
            value={content}
            onChange={e => setContent(e.target.value)}
            maxLength={2000}
            rows={6}
            placeholder="是正指示の内容を詳しく入力してください..."
            className="w-full text-sm border border-slate-300 rounded-xl p-3 resize-none outline-none focus:ring-2 focus:ring-indigo-300 leading-relaxed"
          />
        </div>

        {/* 対応期限 */}
        <div>
          <label className="block text-xs font-bold text-slate-500 mb-1.5">対応期限</label>
          <input type="date" value={deadline} min={minDeadlineStr} onChange={e => setDeadline(e.target.value)}
            className="w-full text-sm border border-slate-300 rounded-xl px-3 py-3 outline-none focus:ring-2 focus:ring-indigo-300" />
        </div>

        <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 transition-colors"
        >
          {canConfirm ? '内容を確認する' : '必須項目を入力してください'}
        </button>
      </div>

      {/* 確認ダイアログ */}
      {showConfirm && (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
          <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={() => setShowConfirm(false)} />
          <div className="relative bg-white rounded-3xl shadow-2xl w-full max-w-md p-6">
            <h3 className="font-bold text-slate-800 text-base mb-1">是正指示の確認</h3>
            <p className="text-xs text-slate-400 mb-4">以下の内容で送信します</p>
            <div className="bg-slate-50 rounded-2xl p-4 space-y-3 mb-5 text-sm">
              <div className="flex justify-between">
                <span className="text-slate-500">対象センター</span>
                <span className="font-semibold text-slate-800">{window.MASTER_CENTERS.find(c => c.id === parseInt(centerId))?.name}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-slate-500">対応期限</span>
                <span className="font-semibold text-slate-800">{deadline}</span>
              </div>
              <div className="pt-2 border-t border-slate-200">
                <p className="text-xs text-slate-500 mb-1">指示内容</p>
                <p className="text-sm text-slate-700 leading-relaxed line-clamp-4">{content}</p>
              </div>
            </div>
            <div className="flex gap-2.5">
              <button onClick={() => setShowConfirm(false)} className="flex-1 py-3 border border-slate-200 rounded-2xl text-sm font-semibold text-slate-600 hover:bg-slate-50">修正する</button>
              <button onClick={handleSave} disabled={saving} className="flex-1 py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-2xl text-sm font-bold disabled:opacity-50">
                {saving ? '送信中...' : '送信する'}
              </button>
            </div>
          </div>
        </div>
      )}

      {showToast && (
        <div className="fixed bottom-6 inset-x-0 flex justify-center z-[300]">
          <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">
            <CheckCircleAC size={16} />是正指示を送信しました
          </div>
        </div>
      )}
    </div>
  );
};

// =============================================================
// 3. 是正結果確認（承認 / 差戻し）
// =============================================================

const CorrectionResult = ({ appData, navigate, refreshData, screenParams }) => {
  const { orderId } = screenParams || {};
  const [activeTab,     setActiveTab]     = useStateACorr(0);
  const [rejectMode,    setRejectMode]    = useStateACorr(false);
  const [returnReason,  setReturnReason]  = useStateACorr('');
  const [showToast,     setShowToast]     = useStateACorr(false);
  const [toastMsg,      setToastMsg]      = useStateACorr('');
  const [saving,        setSaving]        = useStateACorr(false);

  // orderId 未指定時：承認待ち一覧
  if (!orderId) {
    const awaitingOrders = (appData.correctionOrders || []).filter(o => o.status === 'in_review');
    return (
      <div className="p-6 max-w-3xl">
        <h1 className="text-xl font-bold text-slate-800 mb-1">是正結果確認</h1>
        <p className="text-sm text-slate-500 mb-5">対応報告を確認し承認または差戻しを行います</p>
        {awaitingOrders.length === 0 ? (
          <div className="bg-white rounded-2xl border border-slate-200 p-12 text-center">
            <CheckCircleAC size={36} strokeWidth={1.4} className="mx-auto mb-3 text-green-400" />
            <p className="text-sm text-slate-500">現在承認待ちの報告はありません</p>
          </div>
        ) : (
          <div className="space-y-2">
            {awaitingOrders.map(order => {
              const center = window.MASTER_CENTERS.find(c => c.id === order.center_id);
              const reps   = (appData.correctionReports || []).filter(r => r.correction_order_id === order.id && r.review_status === '承認待ち');
              return (
                <button key={order.id} onClick={() => navigate('CORRECTION_RESULT', { orderId: order.id })}
                  className="w-full bg-white rounded-2xl border border-amber-200 p-4 text-left hover:border-indigo-300 transition-all flex items-center gap-3">
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 mb-1">
                      <span className="text-xs font-bold bg-amber-100 text-amber-700 px-2 py-0.5 rounded-full">承認待ち {reps.length}件</span>
                      <span className="text-xs text-slate-500">{center?.name}</span>
                    </div>
                    <p className="text-sm text-slate-700 truncate">{order.content.slice(0, 60)}…</p>
                  </div>
                  <ChevRightAC size={16} className="text-slate-300 flex-shrink-0" />
                </button>
              );
            })}
          </div>
        )}
      </div>
    );
  }

  const order = (appData.correctionOrders || []).find(o => o.id === orderId);
  if (!order) {
    return (
      <div className="p-6 flex flex-col items-center gap-4 text-slate-400">
        <p className="text-sm">是正指示が見つかりません</p>
        <button onClick={() => navigate('CORRECTION_LIST_ADMIN')} className="text-indigo-600 text-sm font-semibold">← 一覧に戻る</button>
      </div>
    );
  }

  const reports = [...(appData.correctionReports || [])]
    .filter(r => r.correction_order_id === order.id)
    .sort((a, b) => b.created_at.localeCompare(a.created_at));

  const cfg         = AC_STATUS[order.status] || AC_STATUS.pending;
  const over        = isOverdueAC(order.deadline) && order.status !== 'resolved';
  const creator     = window.MASTER_USERS.find(u => u.id === order.created_by);
  const centerName  = window.MASTER_CENTERS.find(c => c.id === order.center_id)?.name || '';
  const latest      = reports[0];
  const canApprove  = latest?.review_status === '承認待ち';

  const doAction = (action) => {
    if (action === 'reject' && !returnReason.trim()) return;
    setSaving(true);
    const now = new Date().toISOString().slice(0, 19);
    const isApprove = action === 'approve';
    window.StorageUtils.update(d => ({
      ...d,
      correctionReports: d.correctionReports.map(r =>
        r.id === latest.id
          ? { ...r, review_status: isApprove ? '承認済' : '差戻し', return_reason: isApprove ? null : returnReason.trim(), reviewed_by: 5, reviewed_at: now }
          : r
      ),
      correctionOrders: d.correctionOrders.map(o =>
        o.id === order.id
          ? { ...o, status: isApprove ? 'resolved' : 'rejected', updated_at: now }
          : o
      ),
    }));
    refreshData();
    setSaving(false);
    setRejectMode(false);
    setReturnReason('');
    setToastMsg(isApprove ? '承認しました' : '差戻しました');
    setShowToast(true);
    setTimeout(() => { setShowToast(false); navigate('CORRECTION_LIST_ADMIN'); }, 1800);
  };

  return (
    <div className="p-6 max-w-3xl space-y-5">
      {/* ヘッダ */}
      <div className="flex items-center gap-3">
        <button onClick={() => navigate('CORRECTION_LIST_ADMIN')} className="w-8 h-8 rounded-full hover:bg-slate-100 flex items-center justify-center transition-colors">
          <ArrowLeftAC size={18} className="text-slate-600" />
        </button>
        <div className="flex-1">
          <h1 className="text-xl font-bold text-slate-800">是正結果確認</h1>
        </div>
        <span className={`text-[11px] font-bold px-2.5 py-1 rounded-full ${cfg.badge}`}>{cfg.label}</span>
      </div>

      {/* 指示内容 */}
      <div className="bg-white rounded-2xl border border-slate-200 overflow-hidden">
        <div className="px-5 py-3 bg-indigo-50 border-b border-indigo-100">
          <span className="text-xs font-bold text-indigo-700">是正指示内容</span>
        </div>
        <div className="p-5 space-y-3">
          <p className="text-sm text-slate-700 leading-relaxed">{order.content}</p>
          <div className="flex flex-wrap gap-x-5 gap-y-1 text-xs text-slate-500 pt-2 border-t border-slate-100">
            <span>センター: <span className="font-semibold text-slate-700">{centerName}</span></span>
            <span>期限: <span className={`font-semibold ${over ? 'text-red-600' : 'text-slate-700'}`}>{order.deadline}{over ? '（超過）' : ''}</span></span>
            <span>発行: <span className="font-semibold text-slate-700">{creator?.name}</span></span>
          </div>
        </div>
      </div>

      {/* 報告一覧 */}
      {reports.length > 0 ? (
        <div className="bg-white rounded-2xl border border-slate-200 overflow-hidden">
          <div className="px-5 py-3 bg-slate-50 border-b border-slate-100 flex items-center justify-between">
            <span className="text-xs font-bold text-slate-600">対応報告</span>
            <span className="text-xs text-slate-400">{reports.length}件</span>
          </div>

          {/* タブ */}
          {reports.length > 1 && (
            <div className="flex border-b border-slate-100 overflow-x-auto">
              {reports.map((r, i) => (
                <button key={r.id} onClick={() => setActiveTab(i)}
                  className={`flex-shrink-0 px-4 py-2.5 text-xs font-semibold border-b-2 transition-colors ${
                    activeTab === i ? 'border-indigo-600 text-indigo-600' : 'border-transparent text-slate-400 hover:text-slate-600'
                  }`}>
                  {i === 0 ? `報告 ${reports.length}（最新）` : `報告 ${reports.length - i}`}
                </button>
              ))}
            </div>
          )}

          {(() => {
            const r        = reports[activeTab] || reports[0];
            if (!r) return null;
            const reporter = window.MASTER_USERS.find(u => u.id === r.reported_by);
            return (
              <div className="p-5 space-y-3">
                <p className="text-sm text-slate-700 leading-relaxed">{r.content}</p>
                {r.review_status === '差戻し' && r.return_reason && (
                  <div className="p-3 bg-orange-50 rounded-xl border border-orange-100">
                    <p className="text-[11px] font-bold text-orange-700 mb-1">差戻し理由</p>
                    <p className="text-xs text-orange-800 leading-relaxed">{r.return_reason}</p>
                  </div>
                )}
                <div className="flex items-center justify-between text-xs text-slate-400 pt-2 border-t border-slate-100">
                  <span>{reporter?.name}　{fmtAC(r.created_at)}</span>
                  <span className={`font-bold ${r.review_status === '差戻し' ? 'text-orange-600' : r.review_status === '承認済' ? 'text-green-600' : 'text-amber-600'}`}>
                    {r.review_status}
                  </span>
                </div>
              </div>
            );
          })()}
        </div>
      ) : (
        <div className="bg-slate-50 rounded-2xl border border-slate-200 p-6 text-center text-slate-400 text-sm">
          まだ対応報告がありません
        </div>
      )}

      {/* 差戻し理由入力 */}
      {rejectMode && (
        <div className="bg-orange-50 rounded-2xl border border-orange-200 p-4 space-y-3">
          <div className="flex items-center justify-between">
            <p className="text-sm font-bold text-orange-700">差戻し理由を入力</p>
            <button onClick={() => { setRejectMode(false); setReturnReason(''); }} className="text-slate-400 hover:text-slate-600">
              <XAC size={16} />
            </button>
          </div>
          <textarea
            value={returnReason}
            onChange={e => setReturnReason(e.target.value)}
            maxLength={500}
            rows={3}
            placeholder="差戻しの理由を入力してください（最大500文字）..."
            className="w-full text-sm border border-orange-200 rounded-xl p-3 resize-none outline-none focus:ring-2 focus:ring-orange-300 bg-white leading-relaxed"
          />
          <div className="flex gap-2">
            <button onClick={() => { setRejectMode(false); setReturnReason(''); }} className="flex-1 py-2.5 border border-slate-200 rounded-xl text-sm font-semibold text-slate-600 bg-white hover:bg-slate-50">キャンセル</button>
            <button onClick={() => doAction('reject')} disabled={!returnReason.trim() || saving}
              className="flex-1 py-2.5 bg-orange-600 hover:bg-orange-700 text-white rounded-xl text-sm font-bold disabled:opacity-50 transition-colors">
              {saving ? '処理中...' : '差戻しを確定'}
            </button>
          </div>
        </div>
      )}

      {/* 承認 / 差戻し ボタン */}
      {canApprove && !rejectMode && (
        <div className="flex gap-3">
          <button onClick={() => setRejectMode(true)}
            className="flex-1 py-3 border-2 border-orange-300 text-orange-600 font-bold rounded-2xl text-sm hover:bg-orange-50 transition-colors">
            差戻し
          </button>
          <button onClick={() => doAction('approve')} disabled={saving}
            className="flex-1 py-3 bg-green-600 hover:bg-green-700 text-white font-bold rounded-2xl text-sm transition-colors disabled:opacity-50">
            {saving ? '処理中...' : '承認する'}
          </button>
        </div>
      )}

      {showToast && (
        <div className="fixed bottom-6 inset-x-0 flex justify-center z-[300]">
          <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">
            <CheckCircleAC size={16} />{toastMsg}
          </div>
        </div>
      )}
    </div>
  );
};

Object.assign(window, { CorrectionListAdmin, CorrectionCreate, CorrectionResult });
