'use client';

import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { Plus, Pencil, Trash2, FileDown, Sprout, BadgeCheck, Undo2 } from 'lucide-react';

import ConfirmSpreadingModal from './_components/ConfirmSpreadingModal';
import Navbar from '@/components/Navbar';
import { api } from '@/lib/api';
import { FertilizationPlan } from '@/types';

const currentYear = new Date().getFullYear();

export default function FertilizerPage() {
  const router = useRouter();
  const [year, setYear] = useState<number>(() => {
    if (typeof window !== 'undefined') {
      const saved = localStorage.getItem('fertilizerYear');
      if (saved) return parseInt(saved);
    }
    return currentYear;
  });
  const [plans, setPlans] = useState<FertilizationPlan[]>([]);
  const [loading, setLoading] = useState(true);
  const [deleteError, setDeleteError] = useState<string | null>(null);
  const [actionError, setActionError] = useState<string | null>(null);
  const [confirmTarget, setConfirmTarget] = useState<FertilizationPlan | null>(null);

  useEffect(() => {
    localStorage.setItem('fertilizerYear', String(year));
    fetchPlans();
  }, [year]);

  const fetchPlans = async () => {
    setLoading(true);
    try {
      const res = await api.get(`/fertilizer/plans/?year=${year}`);
      setPlans(res.data);
    } catch (e) {
      console.error(e);
    } finally {
      setLoading(false);
    }
  };

  const handleDelete = async (id: number, name: string) => {
    setDeleteError(null);
    setActionError(null);
    try {
      await api.delete(`/fertilizer/plans/${id}/`);
      await fetchPlans();
    } catch (e) {
      console.error(e);
      setDeleteError(`「${name}」の削除に失敗しました`);
    }
  };

  const handleUnconfirm = async (id: number, name: string) => {
    setActionError(null);
    try {
      await api.post(`/fertilizer/plans/${id}/unconfirm/`);
      await fetchPlans();
    } catch (e) {
      console.error(e);
      setActionError(`「${name}」の確定取消に失敗しました`);
    }
  };

  const handlePdf = async (id: number, name: string) => {
    setActionError(null);
    try {
      const res = await api.get(`/fertilizer/plans/${id}/pdf/`, { responseType: 'blob' });
      const url = URL.createObjectURL(new Blob([res.data], { type: 'application/pdf' }));
      const a = document.createElement('a');
      a.href = url;
      a.download = `施肥計画_${year}_${name}.pdf`;
      a.click();
      URL.revokeObjectURL(url);
    } catch (e) {
      console.error(e);
      setActionError('PDF出力に失敗しました');
    }
  };

  const years = Array.from({ length: 5 }, (_, i) => currentYear + 1 - i);

  return (
    <div className="min-h-screen bg-gray-50">
      <Navbar />
      <div className="max-w-5xl mx-auto px-4 py-8">
        <div className="flex items-center justify-between mb-6">
          <div className="flex items-center gap-3">
            <Sprout className="h-6 w-6 text-green-600" />
            <h1 className="text-2xl font-bold text-gray-800">施肥計画</h1>
          </div>
          <div className="flex items-center gap-3">
            <button
              onClick={() => router.push('/fertilizer/masters')}
              className="px-4 py-2 text-sm border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100"
            >
              肥料マスタ
            </button>
            <button
              onClick={() => router.push('/fertilizer/new')}
              className="flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700"
            >
              <Plus className="h-4 w-4" />
              新規作成
            </button>
          </div>
        </div>

        {/* 年度セレクタ */}
        <div className="flex items-center gap-3 mb-6">
          <label className="text-sm font-medium text-gray-700">年度:</label>
          <select
            value={year}
            onChange={(e) => setYear(parseInt(e.target.value))}
            className="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-green-500"
          >
            {years.map((y) => (
              <option key={y} value={y}>{y}年度</option>
            ))}
          </select>
        </div>

        {deleteError && (
          <div className="mb-4 flex items-start gap-2 bg-red-50 border border-red-300 text-red-700 rounded-lg px-4 py-3 text-sm">
            <span className="font-bold shrink-0">⚠</span>
            <span>{deleteError}</span>
            <button onClick={() => setDeleteError(null)} className="ml-auto shrink-0 text-red-400 hover:text-red-600">✕</button>
          </div>
        )}

        {actionError && (
          <div className="mb-4 flex items-start gap-2 bg-red-50 border border-red-300 text-red-700 rounded-lg px-4 py-3 text-sm">
            <span className="font-bold shrink-0">⚠</span>
            <span>{actionError}</span>
            <button onClick={() => setActionError(null)} className="ml-auto shrink-0 text-red-400 hover:text-red-600">✕</button>
          </div>
        )}

        {loading ? (
          <p className="text-gray-500">読み込み中...</p>
        ) : plans.length === 0 ? (
          <div className="bg-white rounded-lg shadow p-12 text-center text-gray-400">
            <Sprout className="h-12 w-12 mx-auto mb-3 opacity-30" />
            <p>{year}年度の施肥計画はありません</p>
            <button
              onClick={() => router.push('/fertilizer/new')}
              className="mt-4 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 text-sm"
            >
              最初の計画を作成する
            </button>
          </div>
        ) : (
          <div className="bg-white rounded-lg shadow overflow-hidden">
            <table className="w-full text-sm">
              <thead className="bg-gray-50 border-b">
                <tr>
                  <th className="text-left px-4 py-3 font-medium text-gray-700">計画名</th>
                  <th className="text-left px-4 py-3 font-medium text-gray-700">作物 / 品種</th>
                  <th className="text-left px-4 py-3 font-medium text-gray-700">状態</th>
                  <th className="text-right px-4 py-3 font-medium text-gray-700">圃場数</th>
                  <th className="text-right px-4 py-3 font-medium text-gray-700">肥料種数</th>
                  <th className="px-4 py-3"></th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-100">
                {plans.map((plan) => (
                  <tr
                    key={plan.id}
                    className={plan.is_confirmed ? 'bg-sky-50 hover:bg-sky-100/60' : 'hover:bg-gray-50'}
                  >
                    <td className="px-4 py-3 font-medium">
                      <div className="flex items-center gap-2">
                        <span>{plan.name}</span>
                        {plan.is_confirmed && (
                          <span className="inline-flex items-center gap-1 rounded-full bg-sky-100 px-2 py-0.5 text-xs text-sky-700">
                            <BadgeCheck className="h-3.5 w-3.5" />
                            確定済み
                          </span>
                        )}
                      </div>
                    </td>
                    <td className="px-4 py-3 text-gray-600">
                      {plan.crop_name} / {plan.variety_name}
                    </td>
                    <td className="px-4 py-3 text-gray-600">
                      {plan.is_confirmed
                        ? `散布確定 ${plan.confirmed_at ? new Date(plan.confirmed_at).toLocaleString('ja-JP') : ''}`
                        : '未確定'}
                    </td>
                    <td className="px-4 py-3 text-right text-gray-600">{plan.field_count}筆</td>
                    <td className="px-4 py-3 text-right text-gray-600">{plan.fertilizer_count}種</td>
                    <td className="px-4 py-3">
                      <div className="flex items-center gap-2 justify-end">
                        {!plan.is_confirmed ? (
                          <button
                            onClick={() => setConfirmTarget(plan)}
                            className="flex items-center gap-1 px-2.5 py-1.5 text-xs border border-emerald-300 rounded hover:bg-emerald-50 text-emerald-700"
                            title="散布確定"
                          >
                            <BadgeCheck className="h-3.5 w-3.5" />
                            散布確定
                          </button>
                        ) : (
                          <button
                            onClick={() => handleUnconfirm(plan.id, plan.name)}
                            className="flex items-center gap-1 px-2.5 py-1.5 text-xs border border-amber-300 rounded hover:bg-amber-50 text-amber-700"
                            title="確定取消"
                          >
                            <Undo2 className="h-3.5 w-3.5" />
                            確定取消
                          </button>
                        )}
                        <button
                          onClick={() => handlePdf(plan.id, plan.name)}
                          className="flex items-center gap-1 px-2.5 py-1.5 text-xs border border-gray-300 rounded hover:bg-gray-100 text-gray-700"
                          title="PDF出力"
                        >
                          <FileDown className="h-3.5 w-3.5" />
                          PDF
                        </button>
                        <button
                          onClick={() => router.push(`/fertilizer/${plan.id}/edit`)}
                          className="flex items-center gap-1 px-2.5 py-1.5 text-xs border border-blue-300 rounded hover:bg-blue-50 text-blue-700"
                          title="編集"
                        >
                          <Pencil className="h-3.5 w-3.5" />
                          編集
                        </button>
                        <button
                          onClick={() => handleDelete(plan.id, plan.name)}
                          className="flex items-center gap-1 px-2.5 py-1.5 text-xs border border-red-300 rounded hover:bg-red-50 text-red-600"
                          title="削除"
                        >
                          <Trash2 className="h-3.5 w-3.5" />
                          削除
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>

      <ConfirmSpreadingModal
        isOpen={confirmTarget !== null}
        plan={confirmTarget}
        onClose={() => setConfirmTarget(null)}
        onConfirmed={fetchPlans}
      />
    </div>
  );
}