'use client';

import { useState, useEffect, useCallback } from 'react';
import {
  LineChart, Line, ComposedChart, Bar,
  XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer,
} from 'recharts';
import { api } from '@/lib/api';
import Navbar from '@/components/Navbar';
import { Cloud, Loader2, Sun, Droplets, Thermometer, Wind, Search } from 'lucide-react';

// ─── 型定義 ───────────────────────────────────────
interface MonthlyRecord {
  month: number;
  temp_mean_avg: number | null;
  temp_max_avg: number | null;
  temp_min_avg: number | null;
  precip_total: number | null;
  sunshine_total: number | null;
  wind_max: number | null;
  hot_days: number;
  cold_days: number;
  rainy_days: number;
}
interface AnnualSummary {
  temp_mean_avg: number | null;
  precip_total: number | null;
  sunshine_total: number | null;
  hot_days: number;
  cold_days: number;
}
interface SummaryResponse {
  year: number;
  monthly: MonthlyRecord[];
  annual: AnnualSummary;
}
interface DailyRecord {
  date: string;
  temp_mean: number | null;
  temp_max: number | null;
  temp_min: number | null;
  sunshine_h: number | null;
  precip_mm: number | null;
  wind_max: number | null;
  pressure_min: number | null;
}

// ─── ユーティリティ ───────────────────────────────
const MONTH_LABELS = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];

function fmt(val: number | null, digits = 1): string {
  return val == null ? '—' : val.toFixed(digits);
}
function toIso(d: Date): string {
  return d.toISOString().slice(0, 10);
}
// 2025-03-15 → 3/15
function fmtAxisDate(dateStr: string): string {
  const [, m, d] = dateStr.split('-');
  return `${parseInt(m)}/${parseInt(d)}`;
}
// データ点数に応じたX軸ラベル間隔
function calcInterval(count: number): number {
  if (count <= 30)  return 2;   // 3日おき
  if (count <= 90)  return 6;   // 週1
  if (count <= 180) return 13;  // 2週おき
  return 29;                    // 月1
}

// 月別グラフ用変換
function toMonthlyTemp(monthly: MonthlyRecord[]) {
  return monthly.map((m) => ({ month: MONTH_LABELS[m.month - 1], 平均: m.temp_mean_avg, 最高: m.temp_max_avg, 最低: m.temp_min_avg }));
}
function toMonthlyPrecip(monthly: MonthlyRecord[]) {
  return monthly.map((m) => ({
    month: MONTH_LABELS[m.month - 1],
    降水量: m.precip_total != null ? Math.round(m.precip_total) : null,
    日照時間: m.sunshine_total != null ? Math.round(m.sunshine_total) : null,
  }));
}

// 期間集計
function calcPeriodStats(records: DailyRecord[]) {
  const temps = records.map((r) => r.temp_mean).filter((v): v is number => v != null);
  const avgTemp = temps.length ? temps.reduce((a, b) => a + b, 0) / temps.length : null;
  const totalPrecip = records.reduce((s, r) => s + (r.precip_mm ?? 0), 0);
  const totalSunshine = records.reduce((s, r) => s + (r.sunshine_h ?? 0), 0);
  const hotDays = records.filter((r) => r.temp_max != null && r.temp_max >= 35).length;
  const coldDays = records.filter((r) => r.temp_min != null && r.temp_min < 0).length;
  return { avgTemp, totalPrecip, totalSunshine, hotDays, coldDays };
}

// ─── Tooltip フォーマッター ───────────────────────
const tempFmt = (v: unknown) => {
  if (v == null || typeof v !== 'number') return '—';
  return `${v.toFixed(1)}℃`;
};
const precipFmt = (v: unknown, name: unknown) => {
  if (v == null || typeof v !== 'number') return '—';
  return name === '降水量' ? `${v} mm` : `${v} h`;
};

// ─── 共通コンポーネント ───────────────────────────
function StatCard({ icon, label, value }: { icon: React.ReactNode; label: string; value: React.ReactNode }) {
  return (
    <div className="bg-white rounded-lg shadow p-4">
      <div className="flex items-center gap-1.5 mb-1">{icon}<p className="text-xs text-gray-500">{label}</p></div>
      <p className="text-2xl font-bold text-gray-900">{value}</p>
    </div>
  );
}

function DailyTable({ records }: { records: DailyRecord[] }) {
  return (
    <div className="bg-white rounded-lg shadow overflow-hidden">
      <div className="overflow-x-auto max-h-[520px] overflow-y-auto">
        <table className="w-full text-sm">
          <thead className="bg-gray-50 border-b border-gray-200 sticky top-0 z-10">
            <tr>
              {['日付','平均気温','最高','最低','日照h','降水mm','最大風速','最低気圧'].map((h) => (
                <th key={h} className={`px-3 py-2.5 text-xs font-semibold text-gray-600 whitespace-nowrap ${h === '日付' ? 'text-left' : 'text-right'}`}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-100">
            {records.length === 0 ? (
              <tr><td colSpan={8} className="px-3 py-8 text-center text-gray-400">データがありません</td></tr>
            ) : records.map((r) => (
              <tr key={r.date} className="hover:bg-gray-50">
                <td className="px-3 py-1.5 font-medium text-gray-900 whitespace-nowrap">{r.date}</td>
                <td className="px-3 py-1.5 text-right text-gray-700">{fmt(r.temp_mean)}℃</td>
                <td className="px-3 py-1.5 text-right">
                  <span className={r.temp_max != null && r.temp_max >= 35 ? 'text-red-500 font-medium' : 'text-gray-500'}>{fmt(r.temp_max)}℃</span>
                </td>
                <td className="px-3 py-1.5 text-right">
                  <span className={r.temp_min != null && r.temp_min < 0 ? 'text-blue-500 font-medium' : 'text-gray-500'}>{fmt(r.temp_min)}℃</span>
                </td>
                <td className="px-3 py-1.5 text-right text-gray-700">{fmt(r.sunshine_h)}</td>
                <td className="px-3 py-1.5 text-right">
                  <span className={r.precip_mm != null && r.precip_mm >= 10 ? 'text-blue-600 font-medium' : 'text-gray-700'}>{fmt(r.precip_mm)}</span>
                </td>
                <td className="px-3 py-1.5 text-right text-gray-500">{fmt(r.wind_max)}</td>
                <td className="px-3 py-1.5 text-right text-gray-500">{fmt(r.pressure_min, 0)}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      {records.length > 0 && (
        <div className="px-3 py-2 bg-gray-50 border-t border-gray-200 text-xs text-gray-400">
          {records[0].date} 〜 {records[records.length - 1].date}　全{records.length}件
        </div>
      )}
    </div>
  );
}

// ─── メインコンポーネント ─────────────────────────
export default function WeatherPage() {
  const currentYear = new Date().getFullYear();

  // 表示モード
  const [mode, setMode] = useState<'year' | 'period'>('year');

  // ── 年別モード ──
  const [year, setYear] = useState(currentYear);
  const [yearTab, setYearTab] = useState<'chart' | 'summary' | 'recent'>('chart');
  const [summary, setSummary] = useState<SummaryResponse | null>(null);
  const [summaryLoading, setSummaryLoading] = useState(true);
  const [recentRecords, setRecentRecords] = useState<DailyRecord[]>([]);
  const [recentLoading, setRecentLoading] = useState(true);

  // ── 期間指定モード ──
  const defaultEnd   = toIso((() => { const d = new Date(); d.setDate(d.getDate() - 1); return d; })());
  const defaultStart = toIso((() => { const d = new Date(); d.setMonth(d.getMonth() - 3); return d; })());
  const [startDate, setStartDate] = useState(defaultStart);
  const [endDate,   setEndDate]   = useState(defaultEnd);
  const [periodTab, setPeriodTab] = useState<'chart' | 'list'>('chart');
  const [periodRecords, setPeriodRecords] = useState<DailyRecord[]>([]);
  const [periodLoading, setPeriodLoading] = useState(false);
  const [periodFetched, setPeriodFetched] = useState(false);

  // 年別データ取得
  useEffect(() => {
    setSummaryLoading(true);
    api.get(`/weather/summary/?year=${year}`)
      .then((res) => setSummary(res.data))
      .catch(console.error)
      .finally(() => setSummaryLoading(false));
  }, [year]);

  useEffect(() => {
    setRecentLoading(true);
    const end = new Date(); end.setDate(end.getDate() - 1);
    const start = new Date(end); start.setDate(start.getDate() - 13);
    api.get(`/weather/records/?start=${toIso(start)}&end=${toIso(end)}`)
      .then((res) => setRecentRecords([...res.data].reverse()))
      .catch(console.error)
      .finally(() => setRecentLoading(false));
  }, []);

  // 期間指定データ取得
  const fetchPeriod = useCallback(() => {
    if (!startDate || !endDate) return;
    setPeriodLoading(true);
    api.get(`/weather/records/?start=${startDate}&end=${endDate}`)
      .then((res) => { setPeriodRecords(res.data); setPeriodFetched(true); })
      .catch(console.error)
      .finally(() => setPeriodLoading(false));
  }, [startDate, endDate]);

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

  // グラフデータ
  const monthlyTemp   = summary ? toMonthlyTemp(summary.monthly) : [];
  const monthlyPrecip = summary ? toMonthlyPrecip(summary.monthly) : [];

  const periodTempData = periodRecords.map((r) => ({
    date: r.date, label: fmtAxisDate(r.date),
    平均: r.temp_mean, 最高: r.temp_max, 最低: r.temp_min,
  }));
  const periodPrecipData = periodRecords.map((r) => ({
    date: r.date, label: fmtAxisDate(r.date),
    降水量: r.precip_mm != null ? Math.round(r.precip_mm * 10) / 10 : null,
    日照時間: r.sunshine_h != null ? Math.round(r.sunshine_h * 10) / 10 : null,
  }));

  const interval = calcInterval(periodRecords.length);
  const showDot  = periodRecords.length <= 60;
  const periodStats = periodFetched ? calcPeriodStats(periodRecords) : null;

  return (
    <div className="min-h-screen bg-gray-50">
      <Navbar />
      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

        {/* ヘッダー */}
        <div className="flex items-center justify-between mb-6">
          <div className="flex items-center gap-2">
            <Cloud className="h-6 w-6 text-sky-500" />
            <h1 className="text-2xl font-bold text-gray-900">気象データ</h1>
          </div>
          {/* モード切替 */}
          <div className="flex rounded-lg border border-gray-300 overflow-hidden text-sm">
            <button
              onClick={() => setMode('year')}
              className={`px-4 py-1.5 transition-colors ${mode === 'year' ? 'bg-sky-500 text-white' : 'bg-white text-gray-600 hover:bg-gray-50'}`}
            >年別集計</button>
            <button
              onClick={() => setMode('period')}
              className={`px-4 py-1.5 transition-colors ${mode === 'period' ? 'bg-sky-500 text-white' : 'bg-white text-gray-600 hover:bg-gray-50'}`}
            >期間指定</button>
          </div>
        </div>

        {/* ════════════════════════════════════════
            年別集計モード
            ════════════════════════════════════════ */}
        {mode === 'year' && (
          <>
            {/* 年セレクタ */}
            <div className="flex items-center gap-3 mb-4">
              <select
                value={year}
                onChange={(e) => setYear(Number(e.target.value))}
                className="px-3 py-1.5 border border-gray-300 rounded-md text-sm"
              >
                {years.map((y) => <option key={y} value={y}>{y}年</option>)}
              </select>
            </div>

            {/* 年間サマリーカード */}
            {!summaryLoading && summary && (
              <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-6">
                <StatCard icon={<Thermometer className="h-4 w-4 text-orange-400" />} label="年間平均気温"
                  value={<>{fmt(summary.annual.temp_mean_avg)}<span className="text-sm font-normal text-gray-500 ml-1">℃</span></>} />
                <StatCard icon={<Droplets className="h-4 w-4 text-blue-400" />} label="年間降水量"
                  value={<>{fmt(summary.annual.precip_total, 0)}<span className="text-sm font-normal text-gray-500 ml-1">mm</span></>} />
                <StatCard icon={<Sun className="h-4 w-4 text-yellow-400" />} label="年間日照時間"
                  value={<>{fmt(summary.annual.sunshine_total, 0)}<span className="text-sm font-normal text-gray-500 ml-1">h</span></>} />
                <StatCard icon={<Wind className="h-4 w-4 text-gray-400" />} label="猛暑日 / 冬日"
                  value={<>{summary.annual.hot_days}<span className="text-sm font-normal text-red-400 ml-1">猛暑</span><span className="text-sm font-normal text-gray-400 mx-1">/</span>{summary.annual.cold_days}<span className="text-sm font-normal text-blue-400 ml-1">冬</span></>} />
              </div>
            )}

            {/* タブ */}
            <div className="flex border-b border-gray-200 mb-6">
              {(['chart','summary','recent'] as const).map((t) => (
                <button key={t} onClick={() => setYearTab(t)}
                  className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${yearTab === t ? 'border-sky-500 text-sky-600' : 'border-transparent text-gray-500 hover:text-gray-700'}`}>
                  {t === 'chart' ? 'グラフ' : t === 'summary' ? '月別サマリー' : '直近14日'}
                </button>
              ))}
            </div>

            {/* グラフ */}
            {yearTab === 'chart' && (summaryLoading
              ? <div className="flex justify-center py-20"><Loader2 className="h-6 w-6 animate-spin text-gray-400" /></div>
              : summary ? (
                <div className="space-y-6">
                  <ChartCard title="月別気温（℃）">
                    <ResponsiveContainer width="100%" height={280}>
                      <LineChart data={monthlyTemp} margin={{ top: 5, right: 20, left: 0, bottom: 5 }}>
                        <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
                        <XAxis dataKey="month" tick={{ fontSize: 12 }} />
                        <YAxis tick={{ fontSize: 12 }} tickFormatter={(v) => `${v}℃`} domain={['auto','auto']} />
                        <Tooltip formatter={tempFmt} /><Legend />
                        <Line type="monotone" dataKey="最高" stroke="#f97316" strokeWidth={2} dot={{ r: 3 }} connectNulls />
                        <Line type="monotone" dataKey="平均" stroke="#22c55e" strokeWidth={2.5} dot={{ r: 3 }} connectNulls />
                        <Line type="monotone" dataKey="最低" stroke="#3b82f6" strokeWidth={2} dot={{ r: 3 }} connectNulls />
                      </LineChart>
                    </ResponsiveContainer>
                  </ChartCard>
                  <ChartCard title="月別降水量（mm）・日照時間（h）">
                    <ResponsiveContainer width="100%" height={280}>
                      <ComposedChart data={monthlyPrecip} margin={{ top: 5, right: 40, left: 0, bottom: 5 }}>
                        <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
                        <XAxis dataKey="month" tick={{ fontSize: 12 }} />
                        <YAxis yAxisId="precip" orientation="left" tick={{ fontSize: 12 }} label={{ value: 'mm', position: 'insideTopLeft', offset: 5, fontSize: 11, fill: '#6b7280' }} />
                        <YAxis yAxisId="sunshine" orientation="right" tick={{ fontSize: 12 }} tickFormatter={(v) => `${v}h`} />
                        <Tooltip formatter={precipFmt} /><Legend />
                        <Bar yAxisId="precip" dataKey="降水量" fill="#93c5fd" radius={[3,3,0,0]} />
                        <Line yAxisId="sunshine" type="monotone" dataKey="日照時間" stroke="#fbbf24" strokeWidth={2.5} dot={{ r: 3 }} connectNulls />
                      </ComposedChart>
                    </ResponsiveContainer>
                  </ChartCard>
                </div>
              ) : <div className="py-20 text-center text-gray-500 text-sm">データの取得に失敗しました</div>
            )}

            {/* 月別サマリー */}
            {yearTab === 'summary' && (summaryLoading
              ? <div className="flex justify-center py-20"><Loader2 className="h-6 w-6 animate-spin text-gray-400" /></div>
              : summary ? (
                <div className="bg-white rounded-lg shadow overflow-hidden">
                  <div className="overflow-x-auto">
                    <table className="w-full text-sm">
                      <thead className="bg-gray-50 border-b border-gray-200">
                        <tr>
                          {['月','平均気温','最高(avg)','最低(avg)','日照h','降水mm','猛暑日','冬日','雨天日'].map((h) => (
                            <th key={h} className={`px-3 py-2.5 text-xs font-semibold text-gray-600 whitespace-nowrap ${h === '月' ? 'text-left' : 'text-right'}`}>{h}</th>
                          ))}
                        </tr>
                      </thead>
                      <tbody className="divide-y divide-gray-100">
                        {summary.monthly.map((m) => (
                          <tr key={m.month} className="hover:bg-gray-50">
                            <td className="px-3 py-2 font-medium text-gray-900">{MONTH_LABELS[m.month - 1]}</td>
                            <td className="px-3 py-2 text-right text-gray-700">
                              {m.temp_mean_avg == null ? '—' : (
                                <span className={m.temp_mean_avg >= 25 ? 'text-orange-500 font-medium' : m.temp_mean_avg < 5 ? 'text-blue-500 font-medium' : ''}>
                                  {fmt(m.temp_mean_avg)}℃
                                </span>
                              )}
                            </td>
                            <td className="px-3 py-2 text-right text-gray-500">{fmt(m.temp_max_avg)}℃</td>
                            <td className="px-3 py-2 text-right text-gray-500">{fmt(m.temp_min_avg)}℃</td>
                            <td className="px-3 py-2 text-right text-gray-700">{fmt(m.sunshine_total, 0)}</td>
                            <td className="px-3 py-2 text-right text-gray-700">{fmt(m.precip_total, 0)}</td>
                            <td className="px-3 py-2 text-right">{m.hot_days > 0 ? <span className="text-red-500 font-medium">{m.hot_days}</span> : <span className="text-gray-300">0</span>}</td>
                            <td className="px-3 py-2 text-right">{m.cold_days > 0 ? <span className="text-blue-500 font-medium">{m.cold_days}</span> : <span className="text-gray-300">0</span>}</td>
                            <td className="px-3 py-2 text-right text-gray-600">{m.rainy_days}</td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                  <div className="px-3 py-2 bg-gray-50 border-t border-gray-200 text-xs text-gray-400">
                    猛暑日: 最高気温 ≥ 35℃　冬日: 最低気温 &lt; 0℃　雨天日: 降水量 ≥ 1mm
                  </div>
                </div>
              ) : <div className="py-20 text-center text-gray-500 text-sm">データの取得に失敗しました</div>
            )}

            {/* 直近14日 */}
            {yearTab === 'recent' && (recentLoading
              ? <div className="flex justify-center py-20"><Loader2 className="h-6 w-6 animate-spin text-gray-400" /></div>
              : <DailyTable records={recentRecords} />
            )}
          </>
        )}

        {/* ════════════════════════════════════════
            期間指定モード
            ════════════════════════════════════════ */}
        {mode === 'period' && (
          <>
            {/* 期間入力 */}
            <div className="bg-white rounded-lg shadow p-4 mb-6 flex flex-wrap items-end gap-4">
              <div>
                <label className="block text-xs text-gray-500 mb-1">開始日</label>
                <input
                  type="date"
                  value={startDate}
                  max={endDate}
                  min="2016-01-01"
                  onChange={(e) => setStartDate(e.target.value)}
                  className="px-3 py-1.5 border border-gray-300 rounded-md text-sm"
                />
              </div>
              <div>
                <label className="block text-xs text-gray-500 mb-1">終了日</label>
                <input
                  type="date"
                  value={endDate}
                  max={defaultEnd}
                  min={startDate}
                  onChange={(e) => setEndDate(e.target.value)}
                  className="px-3 py-1.5 border border-gray-300 rounded-md text-sm"
                />
              </div>
              <button
                onClick={fetchPeriod}
                disabled={periodLoading}
                className="flex items-center gap-2 px-4 py-1.5 bg-sky-500 text-white rounded-md text-sm hover:bg-sky-600 disabled:opacity-50 transition-colors"
              >
                {periodLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Search className="h-4 w-4" />}
                表示
              </button>
            </div>

            {/* 期間集計カード */}
            {periodStats && periodRecords.length > 0 && (
              <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-6">
                <StatCard icon={<Thermometer className="h-4 w-4 text-orange-400" />} label="期間平均気温"
                  value={<>{fmt(periodStats.avgTemp)}<span className="text-sm font-normal text-gray-500 ml-1">℃</span></>} />
                <StatCard icon={<Droplets className="h-4 w-4 text-blue-400" />} label="期間降水量"
                  value={<>{fmt(periodStats.totalPrecip, 0)}<span className="text-sm font-normal text-gray-500 ml-1">mm</span></>} />
                <StatCard icon={<Sun className="h-4 w-4 text-yellow-400" />} label="期間日照時間"
                  value={<>{fmt(periodStats.totalSunshine, 0)}<span className="text-sm font-normal text-gray-500 ml-1">h</span></>} />
                <StatCard icon={<Wind className="h-4 w-4 text-gray-400" />} label="猛暑日 / 冬日"
                  value={<>{periodStats.hotDays}<span className="text-sm font-normal text-red-400 ml-1">猛暑</span><span className="text-sm font-normal text-gray-400 mx-1">/</span>{periodStats.coldDays}<span className="text-sm font-normal text-blue-400 ml-1">冬</span></>} />
              </div>
            )}

            {/* タブ */}
            {periodFetched && (
              <>
                <div className="flex border-b border-gray-200 mb-6">
                  {(['chart','list'] as const).map((t) => (
                    <button key={t} onClick={() => setPeriodTab(t)}
                      className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${periodTab === t ? 'border-sky-500 text-sky-600' : 'border-transparent text-gray-500 hover:text-gray-700'}`}>
                      {t === 'chart' ? 'グラフ' : '一覧'}
                    </button>
                  ))}
                </div>

                {/* 期間グラフ */}
                {periodTab === 'chart' && (
                  periodRecords.length === 0
                    ? <div className="py-20 text-center text-gray-500 text-sm">指定期間にデータがありません</div>
                    : (
                      <div className="space-y-6">
                        <ChartCard title={`気温（℃）　${startDate} 〜 ${endDate}`}>
                          <ResponsiveContainer width="100%" height={300}>
                            <LineChart data={periodTempData} margin={{ top: 5, right: 20, left: 0, bottom: 5 }}>
                              <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
                              <XAxis dataKey="label" tick={{ fontSize: 11 }} interval={interval} />
                              <YAxis tick={{ fontSize: 12 }} tickFormatter={(v) => `${v}℃`} domain={['auto','auto']} />
                              <Tooltip labelFormatter={(_, payload) => payload?.[0]?.payload?.date ?? ''} formatter={tempFmt} />
                              <Legend />
                              <Line type="monotone" dataKey="最高" stroke="#f97316" strokeWidth={1.5} dot={showDot ? { r: 2 } : false} connectNulls />
                              <Line type="monotone" dataKey="平均" stroke="#22c55e" strokeWidth={2} dot={showDot ? { r: 2 } : false} connectNulls />
                              <Line type="monotone" dataKey="最低" stroke="#3b82f6" strokeWidth={1.5} dot={showDot ? { r: 2 } : false} connectNulls />
                            </LineChart>
                          </ResponsiveContainer>
                        </ChartCard>
                        <ChartCard title={`降水量（mm）・日照時間（h）　${startDate} 〜 ${endDate}`}>
                          <ResponsiveContainer width="100%" height={280}>
                            <ComposedChart data={periodPrecipData} margin={{ top: 5, right: 40, left: 0, bottom: 5 }}>
                              <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
                              <XAxis dataKey="label" tick={{ fontSize: 11 }} interval={interval} />
                              <YAxis yAxisId="precip" orientation="left" tick={{ fontSize: 12 }} label={{ value: 'mm', position: 'insideTopLeft', offset: 5, fontSize: 11, fill: '#6b7280' }} />
                              <YAxis yAxisId="sunshine" orientation="right" tick={{ fontSize: 12 }} tickFormatter={(v) => `${v}h`} />
                              <Tooltip labelFormatter={(_, payload) => payload?.[0]?.payload?.date ?? ''} formatter={precipFmt} />
                              <Legend />
                              <Bar yAxisId="precip" dataKey="降水量" fill="#93c5fd" radius={[2,2,0,0]} maxBarSize={12} />
                              <Line yAxisId="sunshine" type="monotone" dataKey="日照時間" stroke="#fbbf24" strokeWidth={2} dot={showDot ? { r: 2 } : false} connectNulls />
                            </ComposedChart>
                          </ResponsiveContainer>
                        </ChartCard>
                      </div>
                    )
                )}

                {/* 期間一覧 */}
                {periodTab === 'list' && <DailyTable records={[...periodRecords].reverse()} />}
              </>
            )}

            {/* 初期状態 */}
            {!periodFetched && !periodLoading && (
              <div className="py-20 text-center text-gray-400 text-sm">
                開始日・終了日を選択して「表示」を押してください
              </div>
            )}
          </>
        )}

      </div>
    </div>
  );
}

// ─── 小コンポーネント ─────────────────────────────
function ChartCard({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div className="bg-white rounded-lg shadow p-5">
      <h3 className="text-sm font-semibold text-gray-700 mb-4">{title}</h3>
      {children}
    </div>
  );
}
