import React, { useState, useMemo } from 'react';
import { 
  Calendar as CalendarIcon, Users, Building2, Plus, Trash2, Edit3, 
  ChevronLeft, ChevronRight, DollarSign, Calculator, FileText, 
  AlertCircle, Search, HelpCircle, ArrowRight, Car, Clock, Compass, 
  Receipt, LayoutGrid, List, CheckCircle2, ChevronDown, ChevronUp, Eye,
  Briefcase, Layers, TrendingUp, Shuffle, Tag, History, Sparkles
} from 'lucide-react';

// 請負現場（㎡単価・一式請負）の初期データ
const INITIAL_CONTRACTS = [
  {
    id: 'cnt-1',
    siteName: '南草津物流倉庫 外壁工事',
    client: '株式会社山田建設',
    calcType: 'area', // 'area' (㎡単価) or 'lump' (一式)
    area: 250,
    unitPrice: 2000,
    totalContractAmount: 500000, // 250㎡ × 2000円 = 50万円
    monthlyBillings: {
      '2024-08': 100000, // 8月度は10万請求
      '2024-09': 58000,  // 9月度は5.8万請求
    },
    memo: '足場解体後に最終残金請求予定。追加作業は常用として別途計上可能。'
  }
];

const DEFAULT_WORKERS = [
  { id: 'w1', name: 'A君', dailyRate: 18000, overtimeRate: 2500, taxType: 'inclusive', taxRate: 10 }, // 税込（日当全額）
  { id: 'w2', name: 'B君', dailyRate: 20000, overtimeRate: 2800, taxType: 'exclusive', taxRate: 10 }, // 税抜（外税10%加算）
  { id: 'w3', name: 'C君', dailyRate: 16000, overtimeRate: 2200, taxType: 'inclusive', taxRate: 10 },
];

const DEFAULT_CLIENTS = [
  { id: 'c1', name: '株式会社山田建設', billingRate: 24000, kohaRate: 10000, overtimeRate: 3500, taxRate: 10 },
  { id: 'c2', name: '佐藤工務店', billingRate: 25000, kohaRate: 12000, overtimeRate: 4000, taxRate: 10 },
  { id: 'c3', name: '田中興業', billingRate: 23000, kohaRate: 8000, overtimeRate: 3000, taxRate: 10 },
];

// 検索時の文字ゆれ（全角半角・大文字小文字・スペース）を吸収する正規化関数
const normalizeSearchText = (str) => {
  if (!str) return '';
  return str
    .toLowerCase()
    .replace(/[Ａ-Ｚａ-ｚ０-９]/g, (s) => String.fromCharCode(s.charCodeAt(0) - 0xFEE0))
    .replace(/[\s　]+/g, '')
    .trim();
};

const INITIAL_RECORDS = [
  {
    id: 'rec-1',
    date: '2024-07-27',
    client: '株式会社山田建設',
    siteName: '駅前ビル改修工事',
    billingType: 'daily', // 常用現場
    contractId: '',
    billedCount: 2.0,
    billingRate: 24000,
    hasKoha: true,
    kohaFee: 10000,
    overtimeHours: 1.5,
    overtimeRate: 3500,
    parkingFee: 2400,
    transportFee: 1500,
    workerDetails: [
      { workerName: 'A君', workRole: '常用', count: 1.0, rate: 18000, otHours: 1.5, otRate: 2500, allowance: 1000, note: '運転手当+1000' },
      { workerName: 'B君', workRole: '常用', count: 1.5, rate: 20000, otHours: 0, otRate: 2800, allowance: 2000, note: '別現場移動手当' },
    ],
    memo: '光波使用。午後はB君別現場へ移動あり。'
  },
  {
    id: 'rec-2',
    date: '2024-08-05',
    client: '株式会社山田建設',
    siteName: '南草津物流倉庫 外壁工事',
    billingType: 'contract', // 請負単独現場
    contractId: 'cnt-1',
    billedCount: 0,
    billingRate: 0,
    hasKoha: false,
    kohaFee: 0,
    overtimeHours: 0,
    overtimeRate: 0,
    parkingFee: 1500,
    transportFee: 0,
    workerDetails: [
      { workerName: 'A君', workRole: '請負', count: 1.0, rate: 18000, otHours: 0, otRate: 2500, allowance: 0, note: '請負面出し' },
      { workerName: 'B君', workRole: '請負', count: 1.0, rate: 20000, otHours: 0, otRate: 2800, allowance: 0, note: '請負施工' },
    ],
    memo: '請負施工専念日。実費P代のみ計上'
  },
  {
    id: 'rec-3',
    date: '2024-08-08',
    client: '株式会社山田建設',
    siteName: '南草津物流倉庫 外壁工事',
    billingType: 'mixed', // 常用と請負の併用
    contractId: 'cnt-1',
    billedCount: 1.0, // 追加常用1人工分請求
    billingRate: 24000,
    hasKoha: false,
    kohaFee: 0,
    overtimeHours: 1.0,
    overtimeRate: 3500,
    parkingFee: 1800,
    transportFee: 0,
    workerDetails: [
      { workerName: 'A君', workRole: '請負', count: 1.0, rate: 18000, otHours: 0, otRate: 2500, allowance: 0, note: '請負㎡施工' },
      { workerName: 'B君', workRole: '常用', count: 1.0, rate: 20000, otHours: 1.0, otRate: 2800, allowance: 0, note: '元請け指示の追加下地補修' },
    ],
    memo: '請負現場だが急遽元請け依頼でB君が常用作業対応（1人工請求）。'
  }
];

const getClosingPeriod = (yearMonthStr) => {
  const [year, month] = yearMonthStr.split('-').map(Number);
  let prevYear = year;
  let prevMonth = month - 1;
  if (prevMonth === 0) {
    prevMonth = 12;
    prevYear -= 1;
  }
  const startDate = `${prevYear}-${String(prevMonth).padStart(2, '0')}-26`;
  const endDate = `${year}-${String(month).padStart(2, '0')}-25`;

  return {
    label: `${year}年 ${month}月度`,
    periodText: `${prevMonth}/26 〜 ${month}/25`,
    startDate,
    endDate,
    year,
    month
  };
};

export default function App() {
  const [records, setRecords] = useState(INITIAL_RECORDS);
  const [workers, setWorkers] = useState(DEFAULT_WORKERS);
  const [clients, setClients] = useState(DEFAULT_CLIENTS);
  const [contracts, setContracts] = useState(INITIAL_CONTRACTS);

  // 表示対象の月度（25日締め基準）
  const [selectedMonth, setSelectedMonth] = useState('2024-08');

  // メインタブ: 'daily', 'contracts', 'workers', 'clients', 'master'
  const [activeTab, setActiveTab] = useState('daily');

  // モーダル管理
  const [isFormOpen, setIsFormOpen] = useState(false);
  const [isContractModalOpen, setIsContractModalOpen] = useState(false);
  const [editingRecord, setEditingRecord] = useState(null);
  const [editingContract, setEditingContract] = useState(null);
  const [deleteTargetId, setDeleteTargetId] = useState(null);
  const [searchKeyword, setSearchKeyword] = useState('');

  // 現場名サジェスト用のUI制御
  const [isSiteSuggestOpen, setIsSiteSuggestOpen] = useState(false);

  const [formData, setFormData] = useState({
    date: new Date().toISOString().slice(0, 10),
    client: DEFAULT_CLIENTS[0]?.name || '',
    siteName: '',
    billingType: 'daily',
    contractId: '',
    billedCount: 2.0,
    billingRate: DEFAULT_CLIENTS[0]?.billingRate || 24000,
    hasKoha: false,
    kohaFee: DEFAULT_CLIENTS[0]?.kohaRate || 10000,
    overtimeHours: 0,
    overtimeRate: DEFAULT_CLIENTS[0]?.overtimeRate || 3500,
    parkingFee: 0,
    transportFee: 0,
    memo: '',
    workerDetails: [
      { workerName: 'A君', workRole: '常用', count: 1.0, rate: 18000, otHours: 0, otRate: 2500, allowance: 0, note: '' }
    ]
  });

  const [contractFormData, setContractFormData] = useState({
    siteName: '',
    client: DEFAULT_CLIENTS[0]?.name || '',
    calcType: 'area',
    area: 200,
    unitPrice: 2000,
    totalContractAmount: 400000,
    memo: ''
  });

  const period = useMemo(() => getClosingPeriod(selectedMonth), [selectedMonth]);

  const handlePrevMonth = () => {
    const [year, month] = selectedMonth.split('-').map(Number);
    let prevYear = year;
    let prevMonth = month - 1;
    if (prevMonth === 0) {
      prevMonth = 12;
      prevYear -= 1;
    }
    setSelectedMonth(`${prevYear}-${String(prevMonth).padStart(2, '0')}`);
  };

  const handleNextMonth = () => {
    const [year, month] = selectedMonth.split('-').map(Number);
    let nextYear = year;
    let nextMonth = month + 1;
    if (nextMonth === 13) {
      nextMonth = 1;
      nextYear += 1;
    }
    setSelectedMonth(`${nextYear}-${String(nextMonth).padStart(2, '0')}`);
  };

  const existingSitesForCurrentClient = useMemo(() => {
    const targetClient = formData.client;
    const siteSet = new Set();
    contracts.filter(c => c.client === targetClient).forEach(c => siteSet.add(c.siteName));
    records.filter(r => r.client === targetClient).forEach(r => siteSet.add(r.siteName));
    contracts.forEach(c => siteSet.add(c.siteName));
    records.forEach(r => siteSet.add(r.siteName));
    return Array.from(siteSet).filter(Boolean);
  }, [records, contracts, formData.client]);

  const recentSites = useMemo(() => {
    const targetClient = formData.client;
    const sorted = [...records]
      .filter(r => !targetClient || r.client === targetClient)
      .sort((a, b) => b.date.localeCompare(a.date));
    
    const unique = [];
    sorted.forEach(r => {
      if (r.siteName && !unique.includes(r.siteName)) {
        unique.push(r.siteName);
      }
    });
    return unique.slice(0, 5);
  }, [records, formData.client]);

  const filteredSiteSuggestions = useMemo(() => {
    if (!formData.siteName.trim()) {
      return existingSitesForCurrentClient.slice(0, 8);
    }
    const query = normalizeSearchText(formData.siteName);
    return existingSitesForCurrentClient.filter(site => 
      normalizeSearchText(site).includes(query)
    ).slice(0, 8);
  }, [existingSitesForCurrentClient, formData.siteName]);

  const currentPeriodContractBillings = useMemo(() => {
    return contracts.reduce((sum, cnt) => {
      const b = Number(cnt.monthlyBillings?.[selectedMonth]) || 0;
      return sum + b;
    }, 0);
  }, [contracts, selectedMonth]);

  const currentPeriodRecords = useMemo(() => {
    return records.filter(rec => {
      const inPeriod = rec.date >= period.startDate && rec.date <= period.endDate;
      if (!inPeriod) return false;
      if (!searchKeyword.trim()) return true;
      const kw = normalizeSearchText(searchKeyword);
      return (
        normalizeSearchText(rec.siteName).includes(kw) ||
        normalizeSearchText(rec.client).includes(kw) ||
        rec.workerDetails.some(w => normalizeSearchText(w.workerName).includes(kw))
      );
    }).sort((a, b) => a.date.localeCompare(b.date));
  }, [records, period, searchKeyword]);

  const summaryTotals = useMemo(() => {
    let billedCount = 0;
    let billedLabor = 0;
    let billedKoha = 0;
    let billedOT = 0;
    let billedExp = 0;

    let paidCount = 0;
    let paidLabor = 0;
    let paidOT = 0;
    let paidAllowance = 0;

    currentPeriodRecords.forEach(rec => {
      if (rec.billingType === 'daily' || rec.billingType === 'mixed') {
        const bCount = Number(rec.billedCount) || 0;
        const bRate = Number(rec.billingRate) || 0;
        billedCount += bCount;
        billedLabor += bCount * bRate;
        if (rec.hasKoha) billedKoha += Number(rec.kohaFee) || 0;
        billedOT += (Number(rec.overtimeHours) || 0) * (Number(rec.overtimeRate) || 0);
      }
      billedExp += (Number(rec.parkingFee) || 0) + (Number(rec.transportFee) || 0);

      rec.workerDetails.forEach(w => {
        const c = Number(w.count) || 0;
        const r = Number(w.rate) || 0;
        const otH = Number(w.otHours) || 0;
        const otR = Number(w.otRate) || 0;
        const allw = Number(w.allowance) || 0;
        paidCount += c;
        paidLabor += c * r;
        paidOT += otH * otR;
        paidAllowance += allw;
      });
    });

    const totalContractBilled = currentPeriodContractBillings;
    const totalBilled = billedLabor + billedKoha + billedOT + billedExp + totalContractBilled;

    // 取引先別の税率を反映した消費税合計
    let billedTaxTotal = 0;
    clients.forEach(c => {
      const clientRecords = currentPeriodRecords.filter(r => r.client === c.name);
      let clientSubtotal = 0;
      clientRecords.forEach(r => {
        if (r.billingType === 'daily' || r.billingType === 'mixed') {
          clientSubtotal += (Number(r.billedCount) || 0) * (Number(r.billingRate) || 0);
          if (r.hasKoha) clientSubtotal += (Number(r.kohaFee) || 0);
          clientSubtotal += (Number(r.overtimeHours) || 0) * (Number(r.overtimeRate) || 0);
        }
        clientSubtotal += (Number(r.parkingFee) || 0) + (Number(r.transportFee) || 0);
      });
      contracts.filter(cnt => cnt.client === c.name).forEach(cnt => {
        clientSubtotal += Number(cnt.monthlyBillings?.[selectedMonth]) || 0;
      });
      billedTaxTotal += Math.floor(clientSubtotal * ((c.taxRate ?? 10) / 100));
    });
    const totalBilledWithTax = totalBilled + billedTaxTotal;

    // 職人給与（実支払額：税抜設定の職人は外税を加算）
    let totalPaidWithTax = 0;
    workers.forEach(w => {
      let wBase = 0;
      let wOT = 0;
      let wAllw = 0;
      currentPeriodRecords.forEach(r => {
        r.workerDetails.filter(d => d.workerName === w.name).forEach(d => {
          wBase += (Number(d.count) || 0) * (Number(d.rate) || 0);
          wOT += (Number(d.otHours) || 0) * (Number(d.otRate) || 0);
          wAllw += (Number(d.allowance) || 0);
        });
      });
      const sub = wBase + wOT + wAllw;
      if (w.taxType === 'exclusive') {
        totalPaidWithTax += sub + Math.floor(sub * ((w.taxRate ?? 10) / 100));
      } else {
        totalPaidWithTax += sub;
      }
    });

    const totalPaid = paidLabor + paidOT + paidAllowance;
    const profit = totalBilled - totalPaid;
    const profitMargin = totalBilled > 0 ? (profit / totalBilled) * 100 : 0;

    return {
      billedCount,
      billedLabor,
      billedKoha,
      billedOT,
      billedExp,
      totalContractBilled,
      totalBilled,
      billedTaxTotal,
      totalBilledWithTax,
      paidCount,
      paidLabor,
      paidOT,
      paidAllowance,
      totalPaid,
      totalPaidWithTax,
      profit,
      profitMargin,
      diffCount: paidCount - billedCount
    };
  }, [currentPeriodRecords, currentPeriodContractBillings, clients, workers, contracts, selectedMonth]);

  const workerSummaryList = useMemo(() => {
    const map = {};
    currentPeriodRecords.forEach(rec => {
      rec.workerDetails.forEach(w => {
        const masterWorker = workers.find(mw => mw.name === w.workerName);
        const taxType = masterWorker?.taxType || 'inclusive';
        const taxRate = masterWorker?.taxRate ?? 10;

        if (!map[w.workerName]) {
          map[w.workerName] = {
            name: w.workerName,
            taxType,
            taxRate,
            dates: new Set(),
            totalCount: 0,
            contractCount: 0,
            dailyCount: 0,
            basePay: 0,
            otHours: 0,
            otPay: 0,
            allowancePay: 0,
            subtotalPay: 0,
            taxAmount: 0,
            totalPay: 0,
            items: []
          };
        }
        const cnt = Number(w.count) || 0;
        const base = cnt * (Number(w.rate) || 0);
        const otH = Number(w.otHours) || 0;
        const otP = otH * (Number(w.otRate) || 0);
        const allw = Number(w.allowance) || 0;
        const sub = base + otP + allw;

        map[w.workerName].dates.add(rec.date);
        map[w.workerName].totalCount += cnt;
        if (w.workRole === '請負') {
          map[w.workerName].contractCount += cnt;
        } else {
          map[w.workerName].dailyCount += cnt;
        }
        map[w.workerName].basePay += base;
        map[w.workerName].otHours += otH;
        map[w.workerName].otPay += otP;
        map[w.workerName].allowancePay += allw;
        map[w.workerName].subtotalPay += sub;
      });
    });

    return Object.values(map).map(m => {
      let tax = 0;
      let total = m.subtotalPay;
      if (m.taxType === 'exclusive') {
        tax = Math.floor(m.subtotalPay * (m.taxRate / 100));
        total = m.subtotalPay + tax;
      }
      return {
        ...m,
        taxAmount: tax,
        totalPay: total,
        dayCount: m.dates.size
      };
    }).sort((a, b) => b.totalPay - a.totalPay);
  }, [currentPeriodRecords, workers]);

  const clientSummaryList = useMemo(() => {
    const map = {};

    currentPeriodRecords.forEach(rec => {
      const masterClient = clients.find(mc => mc.name === rec.client);
      const taxRate = masterClient?.taxRate ?? 10;

      if (!map[rec.client]) {
        map[rec.client] = {
          clientName: rec.client,
          taxRate,
          siteCount: 0,
          totalCount: 0,
          laborAmount: 0,
          contractAmount: 0,
          kohaAmount: 0,
          otAmount: 0,
          expAmount: 0,
          subtotalAmount: 0,
          taxAmount: 0,
          totalAmountWithTax: 0,
          sites: []
        };
      }
      
      const isDailyOrMixed = rec.billingType === 'daily' || rec.billingType === 'mixed';
      const bCount = isDailyOrMixed ? (Number(rec.billedCount) || 0) : 0;
      const bRate = isDailyOrMixed ? (Number(rec.billingRate) || 0) : 0;
      const labor = bCount * bRate;
      const koha = (isDailyOrMixed && rec.hasKoha) ? (Number(rec.kohaFee) || 0) : 0;
      const ot = isDailyOrMixed ? ((Number(rec.overtimeHours) || 0) * (Number(rec.overtimeRate) || 0)) : 0;
      const exp = (Number(rec.parkingFee) || 0) + (Number(rec.transportFee) || 0);
      const subtotal = labor + koha + ot + exp;

      map[rec.client].siteCount += 1;
      map[rec.client].totalCount += bCount;
      map[rec.client].laborAmount += labor;
      map[rec.client].kohaAmount += koha;
      map[rec.client].otAmount += ot;
      map[rec.client].expAmount += exp;
      map[rec.client].subtotalAmount += subtotal;
    });

    contracts.forEach(cnt => {
      const monthBilled = Number(cnt.monthlyBillings?.[selectedMonth]) || 0;
      if (monthBilled > 0) {
        const masterClient = clients.find(mc => mc.name === cnt.client);
        const taxRate = masterClient?.taxRate ?? 10;

        if (!map[cnt.client]) {
          map[cnt.client] = {
            clientName: cnt.client,
            taxRate,
            siteCount: 0,
            totalCount: 0,
            laborAmount: 0,
            contractAmount: 0,
            kohaAmount: 0,
            otAmount: 0,
            expAmount: 0,
            subtotalAmount: 0,
            taxAmount: 0,
            totalAmountWithTax: 0,
            sites: []
          };
        }
        map[cnt.client].contractAmount += monthBilled;
        map[cnt.client].subtotalAmount += monthBilled;
      }
    });

    return Object.values(map).map(item => {
      const tax = Math.floor(item.subtotalAmount * (item.taxRate / 100));
      return {
        ...item,
        taxAmount: tax,
        totalAmountWithTax: item.subtotalAmount + tax
      };
    }).sort((a, b) => b.totalAmountWithTax - a.totalAmountWithTax);
  }, [currentPeriodRecords, contracts, clients, selectedMonth]);

  const openNewRecordModal = () => {
    setEditingRecord(null);
    const defClient = clients[0] || { name: '', billingRate: 24000, kohaRate: 10000, overtimeRate: 3500 };
    const defWorker = workers[0] || { name: 'A君', dailyRate: 18000, overtimeRate: 2500 };
    setFormData({
      date: new Date().toISOString().slice(0, 10),
      client: defClient.name,
      siteName: '',
      billingType: 'daily',
      contractId: '',
      billedCount: 2.0,
      billingRate: defClient.billingRate,
      hasKoha: false,
      kohaFee: defClient.kohaRate || 10000,
      overtimeHours: 0,
      overtimeRate: defClient.overtimeRate || 3500,
      parkingFee: 0,
      transportFee: 0,
      memo: '',
      workerDetails: [
        {
          workerName: defWorker.name,
          workRole: '常用',
          count: 1.0,
          rate: defWorker.dailyRate,
          otHours: 0,
          otRate: defWorker.overtimeRate || 2500,
          allowance: 0,
          note: ''
        }
      ]
    });
    setIsFormOpen(true);
  };

  const openEditRecordModal = (rec) => {
    setEditingRecord(rec);
    setFormData({
      date: rec.date,
      client: rec.client,
      siteName: rec.siteName,
      billingType: rec.billingType || 'daily',
      contractId: rec.contractId || '',
      billedCount: rec.billedCount ?? 2.0,
      billingRate: rec.billingRate ?? 24000,
      hasKoha: !!rec.hasKoha,
      kohaFee: rec.kohaFee ?? 10000,
      overtimeHours: rec.overtimeHours ?? 0,
      overtimeRate: rec.overtimeRate ?? 3500,
      parkingFee: rec.parkingFee ?? 0,
      transportFee: rec.transportFee ?? 0,
      memo: rec.memo || '',
      workerDetails: rec.workerDetails.map(w => ({
        ...w,
        workRole: w.workRole || (rec.billingType === 'contract' ? '請負' : '常用'),
        otHours: w.otHours ?? 0,
        otRate: w.otRate ?? 2500,
        allowance: w.allowance ?? 0,
        note: w.note || ''
      }))
    });
    setIsFormOpen(true);
  };

  const handleClientChange = (clientName) => {
    const target = clients.find(c => c.name === clientName);
    setFormData(prev => ({
      ...prev,
      client: clientName,
      billingRate: target ? target.billingRate : prev.billingRate,
      kohaFee: target ? target.kohaRate : prev.kohaFee,
      overtimeRate: target ? target.overtimeRate : prev.overtimeRate,
    }));
  };

  const handleWorkerNameChange = (idx, name) => {
    const target = workers.find(w => w.name === name);
    const updated = [...formData.workerDetails];
    updated[idx] = {
      ...updated[idx],
      workerName: name,
      rate: target ? target.dailyRate : updated[idx].rate,
      otRate: target ? target.overtimeRate : updated[idx].otRate,
    };
    setFormData({ ...formData, workerDetails: updated });
  };

  const addWorkerRow = () => {
    const defaultRole = formData.billingType === 'contract' ? '請負' : '常用';
    const firstWorker = workers[0] || { name: '職人', dailyRate: 18000, overtimeRate: 2500 };
    setFormData(prev => ({
      ...prev,
      workerDetails: [
        ...prev.workerDetails,
        {
          workerName: firstWorker.name,
          workRole: defaultRole,
          count: 1.0,
          rate: firstWorker.dailyRate,
          otHours: 0,
          otRate: firstWorker.overtimeRate || 2500,
          allowance: 0,
          note: ''
        }
      ]
    }));
  };

  const removeWorkerRow = (idx) => {
    if (formData.workerDetails.length <= 1) return;
    setFormData(prev => ({
      ...prev,
      workerDetails: prev.workerDetails.filter((_, i) => i !== idx)
    }));
  };

  const handleSaveRecord = (e) => {
    e.preventDefault();
    if (!formData.siteName.trim()) return;

    const payload = {
      ...formData,
      billedCount: (formData.billingType === 'contract') ? 0 : Number(formData.billedCount) || 0,
      billingRate: (formData.billingType === 'contract') ? 0 : Number(formData.billingRate) || 0,
      kohaFee: Number(formData.kohaFee) || 0,
      overtimeHours: (formData.billingType === 'contract') ? 0 : Number(formData.overtimeHours) || 0,
      overtimeRate: Number(formData.overtimeRate) || 0,
      parkingFee: Number(formData.parkingFee) || 0,
      transportFee: Number(formData.transportFee) || 0,
      workerDetails: formData.workerDetails.map(w => ({
        ...w,
        count: Number(w.count) || 0,
        rate: Number(w.rate) || 0,
        otHours: Number(w.otHours) || 0,
        otRate: Number(w.otRate) || 0,
        allowance: Number(w.allowance) || 0,
      }))
    };

    if (editingRecord) {
      setRecords(prev => prev.map(r => r.id === editingRecord.id ? { ...payload, id: r.id } : r));
    } else {
      setRecords(prev => [{ ...payload, id: 'rec-' + Date.now() }, ...prev]);
    }
    setIsFormOpen(false);
  };

  const handleDeleteRecord = (id) => {
    setRecords(prev => prev.filter(r => r.id !== id));
    setDeleteTargetId(null);
  };

  const handleUpdateMonthlyContractBilling = (contractId, month, amount) => {
    setContracts(prev => prev.map(cnt => {
      if (cnt.id !== contractId) return cnt;
      return {
        ...cnt,
        monthlyBillings: {
          ...cnt.monthlyBillings,
          [month]: Number(amount) || 0
        }
      };
    }));
  };

  const openNewContractModal = () => {
    setEditingContract(null);
    setContractFormData({
      siteName: '',
      client: clients[0]?.name || '',
      calcType: 'area',
      area: 200,
      unitPrice: 2000,
      totalContractAmount: 400000,
      memo: ''
    });
    setIsContractModalOpen(true);
  };

  const openEditContractModal = (cnt) => {
    setEditingContract(cnt);
    setContractFormData({
      siteName: cnt.siteName,
      client: cnt.client,
      calcType: cnt.calcType || 'area',
      area: cnt.area || 0,
      unitPrice: cnt.unitPrice || 0,
      totalContractAmount: cnt.totalContractAmount || 0,
      memo: cnt.memo || ''
    });
    setIsContractModalOpen(true);
  };

  const saveContract = (e) => {
    e.preventDefault();
    if (!contractFormData.siteName.trim()) return;

    let total = Number(contractFormData.totalContractAmount) || 0;
    if (contractFormData.calcType === 'area') {
      total = (Number(contractFormData.area) || 0) * (Number(contractFormData.unitPrice) || 0);
    }

    const payload = {
      ...contractFormData,
      totalContractAmount: total,
      area: Number(contractFormData.area) || 0,
      unitPrice: Number(contractFormData.unitPrice) || 0,
    };

    if (editingContract) {
      setContracts(prev => prev.map(c => c.id === editingContract.id ? { ...c, ...payload } : c));
    } else {
      setContracts(prev => [
        ...prev,
        {
          ...payload,
          id: 'cnt-' + Date.now(),
          monthlyBillings: {}
        }
      ]);
    }
    setIsContractModalOpen(false);
  };

  return (
    <div className="min-h-screen bg-slate-100 text-slate-900 flex flex-col font-sans antialiased">
      
      {/* ナビゲーションバー */}
      <header className="bg-slate-900 text-white shadow-md sticky top-0 z-40">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 py-3 flex flex-wrap items-center justify-between gap-3">
          <div className="flex items-center gap-3">
            <div className="bg-amber-500 text-slate-950 p-2 rounded-xl font-black shadow-inner flex items-center justify-center">
              <Building2 className="w-5 h-5" />
            </div>
            <div>
              <h1 className="text-base sm:text-lg font-black tracking-tight flex items-center gap-2">
                現場・人工管理システム
                <span className="text-[11px] bg-amber-400 text-slate-950 font-extrabold px-2 py-0.5 rounded-full uppercase">
                  25日締め・常用＆請負
                </span>
              </h1>
              <p className="text-xs text-slate-400 hidden sm:block">
                常用人工請求・請負出来高・同一現場での併用作業を一括管理
              </p>
            </div>
          </div>

          <div className="flex items-center gap-2">
            <button
              onClick={openNewRecordModal}
              className="flex items-center gap-1.5 bg-gradient-to-r from-amber-500 to-amber-400 hover:from-amber-400 hover:to-amber-300 text-slate-950 font-black px-4 py-2 rounded-xl shadow text-xs sm:text-sm transition transform active:scale-95 cursor-pointer"
            >
              <Plus className="w-4 h-4 stroke-[3]" />
              日報を入力
            </button>
          </div>
        </div>
      </header>

      {/* 25日締め月度セレクター & メインタブ */}
      <div className="bg-white border-b border-slate-200 sticky top-[57px] z-30 shadow-2xs">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 py-2.5 flex flex-col md:flex-row items-stretch md:items-center justify-between gap-3">
          
          <div className="flex items-center justify-between sm:justify-start gap-2 bg-slate-50 px-3 py-1.5 rounded-2xl border border-slate-200">
            <button
              onClick={handlePrevMonth}
              className="p-1.5 hover:bg-white rounded-lg text-slate-600 hover:text-slate-950 transition border border-transparent hover:border-slate-200"
              title="前月度へ"
            >
              <ChevronLeft className="w-5 h-5" />
            </button>
            <div className="text-center px-2">
              <span className="text-sm sm:text-base font-black text-slate-900 block tracking-tight">
                {period.label}
              </span>
              <span className="text-[11px] font-bold text-amber-700 block -mt-0.5">
                締め期間: {period.periodText}
              </span>
            </div>
            <button
              onClick={handleNextMonth}
              className="p-1.5 hover:bg-white rounded-lg text-slate-600 hover:text-slate-950 transition border border-transparent hover:border-slate-200"
              title="翌月度へ"
            >
              <ChevronRight className="w-5 h-5" />
            </button>
          </div>

          <div className="flex items-center bg-slate-100 p-1 rounded-xl border border-slate-200 overflow-x-auto text-xs sm:text-sm font-bold scrollbar-none">
            <button
              onClick={() => setActiveTab('daily')}
              className={`px-3 py-1.5 rounded-lg transition whitespace-nowrap flex items-center gap-1.5 ${
                activeTab === 'daily'
                  ? 'bg-white text-slate-900 shadow-xs'
                  : 'text-slate-600 hover:text-slate-900'
              }`}
            >
              <List className="w-4 h-4 text-amber-600" />
              日別日報 ({currentPeriodRecords.length})
            </button>
            <button
              onClick={() => setActiveTab('contracts')}
              className={`px-3 py-1.5 rounded-lg transition whitespace-nowrap flex items-center gap-1.5 ${
                activeTab === 'contracts'
                  ? 'bg-white text-slate-900 shadow-xs'
                  : 'text-slate-600 hover:text-slate-900'
              }`}
            >
              <Briefcase className="w-4 h-4 text-purple-600" />
              請負・出来高管理 ({contracts.length}件)
            </button>
            <button
              onClick={() => setActiveTab('workers')}
              className={`px-3 py-1.5 rounded-lg transition whitespace-nowrap flex items-center gap-1.5 ${
                activeTab === 'workers'
                  ? 'bg-white text-slate-900 shadow-xs'
                  : 'text-slate-600 hover:text-slate-900'
              }`}
            >
              <Users className="w-4 h-4 text-emerald-600" />
              職人給与集計 ({workerSummaryList.length}人)
            </button>
            <button
              onClick={() => setActiveTab('clients')}
              className={`px-3 py-1.5 rounded-lg transition whitespace-nowrap flex items-center gap-1.5 ${
                activeTab === 'clients'
                  ? 'bg-white text-slate-900 shadow-xs'
                  : 'text-slate-600 hover:text-slate-900'
              }`}
            >
              <Building2 className="w-4 h-4 text-blue-600" />
              請求先別集計 ({clientSummaryList.length}社)
            </button>
            <button
              onClick={() => setActiveTab('master')}
              className={`px-3 py-1.5 rounded-lg transition whitespace-nowrap ${
                activeTab === 'master'
                  ? 'bg-white text-slate-900 shadow-xs'
                  : 'text-slate-600 hover:text-slate-900'
              }`}
            >
              単価設定
            </button>
          </div>

        </div>
      </div>

      <main className="max-w-7xl mx-auto px-4 sm:px-6 py-6 space-y-6 flex-1 w-full">
        
        <section className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
          
          {/* 取引先への請求総額 */}
          <div className="bg-white rounded-2xl p-4 sm:p-5 border-2 border-blue-100 shadow-xs relative overflow-hidden">
            <div className="absolute top-0 left-0 right-0 h-1.5 bg-blue-500"></div>
            <div className="flex items-center justify-between mb-1">
              <span className="text-xs font-black text-blue-900 uppercase tracking-wide flex items-center gap-1">
                <Building2 className="w-4 h-4 text-blue-600" /> 取引先請求総額 (税込)
              </span>
              <span className="bg-blue-100 text-blue-800 text-xs px-2 py-0.5 rounded-full font-black">
                {summaryTotals.billedCount.toFixed(1)} 常用人工
              </span>
            </div>
            <div className="text-2xl sm:text-3xl font-black text-slate-900 tracking-tight font-mono">
              <span className="text-base sm:text-lg font-bold mr-1">¥</span>
              {summaryTotals.totalBilledWithTax.toLocaleString()}
            </div>
            <div className="mt-2 pt-2 border-t border-slate-100 flex flex-wrap gap-x-2 text-[11px] text-slate-500 font-medium">
              <span className="font-bold text-slate-700">税抜計: ¥{summaryTotals.totalBilled.toLocaleString()}</span>
              <span className="text-blue-700 font-bold">消費税: ¥{summaryTotals.billedTaxTotal.toLocaleString()}</span>
            </div>
          </div>

          {/* 職人への支払総額 */}
          <div className="bg-white rounded-2xl p-4 sm:p-5 border-2 border-emerald-100 shadow-xs relative overflow-hidden">
            <div className="absolute top-0 left-0 right-0 h-1.5 bg-emerald-500"></div>
            <div className="flex items-center justify-between mb-1">
              <span className="text-xs font-black text-emerald-900 uppercase tracking-wide flex items-center gap-1">
                <Users className="w-4 h-4 text-emerald-600" /> 職人支払総額 (実支給)
              </span>
              <span className="bg-emerald-100 text-emerald-800 text-xs px-2 py-0.5 rounded-full font-black">
                {summaryTotals.paidCount.toFixed(1)} 人工
              </span>
            </div>
            <div className="text-2xl sm:text-3xl font-black text-slate-900 tracking-tight font-mono">
              <span className="text-base sm:text-lg font-bold mr-1">¥</span>
              {summaryTotals.totalPaidWithTax.toLocaleString()}
            </div>
            <div className="mt-2 pt-2 border-t border-slate-100 flex flex-wrap gap-x-2 text-[11px] text-slate-500 font-medium">
              <span>基本日当: ¥{summaryTotals.paidLabor.toLocaleString()}</span>
              {summaryTotals.paidOT > 0 && <span className="text-indigo-700 font-bold">残業: ¥{summaryTotals.paidOT.toLocaleString()}</span>}
              {summaryTotals.paidAllowance > 0 && <span className="text-teal-700 font-bold">手当: ¥{summaryTotals.paidAllowance.toLocaleString()}</span>}
            </div>
          </div>

          {/* 手元に残る粗利益 */}
          <div className="bg-white rounded-2xl p-4 sm:p-5 border-2 border-amber-200 shadow-xs relative overflow-hidden bg-gradient-to-br from-white to-amber-50/40">
            <div className="absolute top-0 left-0 right-0 h-1.5 bg-amber-500"></div>
            <div className="flex items-center justify-between mb-1">
              <span className="text-xs font-black text-amber-900 uppercase tracking-wide flex items-center gap-1">
                <DollarSign className="w-4 h-4 text-amber-600" /> 手元に残る粗利益
              </span>
              <span className="bg-amber-100 text-amber-900 text-xs px-2 py-0.5 rounded-full font-black">
                利益率 {summaryTotals.profitMargin.toFixed(1)}%
              </span>
            </div>
            <div className={`text-2xl sm:text-3xl font-black tracking-tight font-mono ${summaryTotals.profit >= 0 ? 'text-amber-700' : 'text-rose-600'}`}>
              <span className="text-base sm:text-lg font-bold mr-1">¥</span>
              {summaryTotals.profit.toLocaleString()}
            </div>
            <p className="mt-2 pt-2 border-t border-slate-100 text-[11px] text-slate-500 font-medium">
              税抜売上総額（常用＋請負＋実費） − 職人給与
            </p>
          </div>

          {/* 請負出来高合計 */}
          <div className="bg-white rounded-2xl p-4 sm:p-5 border-2 border-purple-100 shadow-xs relative overflow-hidden">
            <div className="absolute top-0 left-0 right-0 h-1.5 bg-purple-500"></div>
            <div className="flex items-center justify-between mb-1">
              <span className="text-xs font-black text-purple-900 uppercase tracking-wide flex items-center gap-1">
                <Briefcase className="w-4 h-4 text-purple-600" /> 当月請負出来高
              </span>
              <span className="text-[10px] bg-purple-100 text-purple-700 px-1.5 py-0.5 rounded font-bold">
                {period.label}
              </span>
            </div>
            <div className="text-2xl sm:text-3xl font-black text-purple-950 tracking-tight font-mono">
              <span className="text-base sm:text-lg font-bold mr-1">¥</span>
              {summaryTotals.totalContractBilled.toLocaleString()}
            </div>
            <p className="mt-2 pt-2 border-t border-slate-100 text-[11px] text-slate-500 font-medium">
              ㎡請負・一式の当月請求分
            </p>
          </div>

        </section>

        {activeTab === 'daily' && (
          <div className="space-y-4">
            
            <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3 bg-white p-3 rounded-2xl border border-slate-200 shadow-2xs">
              <div className="relative flex-1 max-w-md">
                <Search className="w-4 h-4 text-slate-400 absolute left-3.5 top-1/2 -translate-y-1/2" />
                <input
                  type="text"
                  placeholder="現場名、取引先、職人名で検索..."
                  value={searchKeyword}
                  onChange={(e) => setSearchKeyword(e.target.value)}
                  className="w-full pl-10 pr-3 py-2 text-sm bg-slate-50 border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-amber-500 focus:bg-white transition"
                />
              </div>

              <div className="flex items-center justify-end gap-2">
                <span className="text-xs font-bold text-slate-500">
                  該当 <strong className="text-slate-800">{currentPeriodRecords.length}</strong> 件
                </span>
              </div>
            </div>

            {currentPeriodRecords.length === 0 ? (
              <div className="bg-white rounded-2xl p-12 text-center border-2 border-dashed border-slate-200">
                <CalendarIcon className="w-12 h-12 mx-auto text-slate-300 mb-3" />
                <h3 className="font-bold text-slate-700 text-base">この期間（{period.label}）の現場日報はありません</h3>
                <p className="text-xs text-slate-400 mt-1 max-w-sm mx-auto">
                  「日報を入力」ボタンから、当日の現場名や常用・請負・併用区分を登録してください。
                </p>
                <button
                  onClick={openNewRecordModal}
                  className="mt-4 inline-flex items-center gap-2 bg-amber-500 hover:bg-amber-400 text-slate-950 font-black px-5 py-2.5 rounded-xl text-sm shadow transition"
                >
                  <Plus className="w-4 h-4 stroke-[3]" /> 日報を新規登録
                </button>
              </div>
            ) : (
              <div className="space-y-4">
                {currentPeriodRecords.map(rec => {
                  const isMixed = rec.billingType === 'mixed';
                  const isContractOnly = rec.billingType === 'contract';
                  const isDailyOnly = rec.billingType === 'daily';

                  const workerCount = rec.workerDetails.reduce((sum, w) => sum + (Number(w.count) || 0), 0);
                  const workerPay = rec.workerDetails.reduce((sum, w) => {
                    const base = (Number(w.count) || 0) * (Number(w.rate) || 0);
                    const ot = (Number(w.otHours) || 0) * (Number(w.otRate) || 0);
                    const allw = Number(w.allowance) || 0;
                    return sum + base + ot + allw;
                  }, 0);

                  const laborBilled = isContractOnly ? 0 : (Number(rec.billedCount) || 0) * (Number(rec.billingRate) || 0);
                  const kohaBilled = (isDailyOnly || isMixed) && rec.hasKoha ? (Number(rec.kohaFee) || 0) : 0;
                  const otBilled = (isDailyOnly || isMixed) ? (Number(rec.overtimeHours) || 0) * (Number(rec.overtimeRate) || 0) : 0;
                  const expBilled = (Number(rec.parkingFee) || 0) + (Number(rec.transportFee) || 0);
                  const billedToday = laborBilled + kohaBilled + otBilled + expBilled;

                  return (
                    <div key={rec.id} className="bg-white rounded-2xl border border-slate-200/90 shadow-xs hover:shadow-md transition-all overflow-hidden">
                      
                      <div className="bg-slate-900 text-white px-4 py-3 flex flex-wrap items-center justify-between gap-2">
                        <div className="flex flex-wrap items-center gap-2 sm:gap-3">
                          <span className="bg-amber-500 text-slate-950 font-black text-xs px-2.5 py-1 rounded-md tracking-wider font-mono">
                            {rec.date}
                          </span>
                          <span className="font-black text-base text-white tracking-tight">
                            {rec.siteName}
                          </span>
                          <span className="text-xs bg-slate-800 text-slate-300 border border-slate-700 px-2.5 py-0.5 rounded-full font-semibold">
                            {rec.client}
                          </span>

                          {isMixed && (
                            <span className="text-[11px] bg-gradient-to-r from-purple-800 to-blue-800 text-white border border-purple-400 px-2.5 py-0.5 rounded-full font-black flex items-center gap-1 shadow-2xs">
                              <Shuffle className="w-3 h-3 text-amber-300" /> 請負＋常用（両方あり）
                            </span>
                          )}
                          {isContractOnly && (
                            <span className="text-[11px] bg-purple-900/90 text-purple-200 border border-purple-700 px-2.5 py-0.5 rounded-full font-bold flex items-center gap-1">
                              <Briefcase className="w-3 h-3 text-purple-400" /> 請負単独現場
                            </span>
                          )}
                          {isDailyOnly && (
                            <span className="text-[11px] bg-blue-900/90 text-blue-200 border border-blue-700 px-2.5 py-0.5 rounded-full font-bold flex items-center gap-1">
                              常用現場（人工請求）
                            </span>
                          )}

                          {rec.hasKoha && (
                            <span className="text-[11px] bg-sky-900/80 text-sky-200 border border-sky-700 px-2 py-0.5 rounded font-bold flex items-center gap-1">
                              <Compass className="w-3 h-3 text-sky-400" /> 光波
                            </span>
                          )}
                          {Number(rec.overtimeHours) > 0 && (
                            <span className="text-[11px] bg-indigo-900/80 text-indigo-200 border border-indigo-700 px-2 py-0.5 rounded font-bold flex items-center gap-1">
                              <Clock className="w-3 h-3 text-indigo-400" /> 残業{rec.overtimeHours}h
                            </span>
                          )}
                          {expBilled > 0 && (
                            <span className="text-[11px] bg-amber-900/80 text-amber-200 border border-amber-700 px-2 py-0.5 rounded font-bold flex items-center gap-1">
                              <Car className="w-3 h-3 text-amber-400" /> 実費有
                            </span>
                          )}
                        </div>

                        <div className="flex items-center gap-1">
                          <button
                            onClick={() => openEditRecordModal(rec)}
                            className="p-1.5 text-slate-300 hover:text-amber-400 hover:bg-slate-800 rounded-lg transition"
                            title="編集"
                          >
                            <Edit3 className="w-4 h-4" />
                          </button>
                          <button
                            onClick={() => setDeleteTargetId(rec.id)}
                            className="p-1.5 text-slate-300 hover:text-rose-400 hover:bg-slate-800 rounded-lg transition"
                            title="削除"
                          >
                            <Trash2 className="w-4 h-4" />
                          </button>
                        </div>
                      </div>

                      <div className="p-4 sm:p-5 grid grid-cols-1 md:grid-cols-12 gap-5">
                        
                        <div className={`md:col-span-5 p-4 rounded-xl border flex flex-col justify-between ${
                          isMixed
                            ? 'bg-gradient-to-br from-purple-50/70 to-blue-50/70 border-purple-200'
                            : isContractOnly
                            ? 'bg-purple-50/50 border-purple-200'
                            : 'bg-blue-50/50 border-blue-200'
                        }`}>
                          <div>
                            <div className="flex items-center justify-between pb-2 mb-2 border-b border-slate-200">
                              <span className="text-xs font-black text-slate-900 flex items-center gap-1.5">
                                {isMixed ? (
                                  <><Shuffle className="w-4 h-4 text-purple-600" /> 請負現場での常用請求</>
                                ) : isContractOnly ? (
                                  <><Briefcase className="w-4 h-4 text-purple-600" /> 請負出来高計上</>
                                ) : (
                                  <><Building2 className="w-4 h-4 text-blue-600" /> 取引先への常用請求</>
                                )}
                              </span>
                              <span className="text-xs font-bold px-2 py-0.5 rounded-full bg-white border border-slate-200 text-slate-800">
                                {isContractOnly ? '出来高一括' : `常用 ${rec.billedCount} 人工`}
                              </span>
                            </div>

                            <div className="space-y-1.5 text-xs text-slate-600">
                              {isContractOnly ? (
                                <p className="text-[11px] text-slate-500 leading-relaxed">
                                  請負工事に専念。請求は「請負管理」タブの月度出来高に集計されます。
                                </p>
                              ) : (
                                <>
                                  <div className="flex justify-between">
                                    <span>
                                      {isMixed ? '追加常用人工代' : '常用人工代'} ({rec.billedCount}人 × ¥{Number(rec.billingRate).toLocaleString()}):
                                    </span>
                                    <span className="font-bold text-slate-900 font-mono">¥{laborBilled.toLocaleString()}</span>
                                  </div>
                                  {rec.hasKoha && (
                                    <div className="flex justify-between text-sky-800 font-medium">
                                      <span className="flex items-center gap-1"><Compass className="w-3 h-3" /> 光波持込料:</span>
                                      <span className="font-bold font-mono">¥{kohaBilled.toLocaleString()}</span>
                                    </div>
                                  )}
                                  {Number(rec.overtimeHours) > 0 && (
                                    <div className="flex justify-between text-indigo-800 font-medium">
                                      <span className="flex items-center gap-1"><Clock className="w-3 h-3" /> 残業 ({rec.overtimeHours}h × ¥{Number(rec.overtimeRate).toLocaleString()}):</span>
                                      <span className="font-bold font-mono">¥{otBilled.toLocaleString()}</span>
                                    </div>
                                  )}
                                </>
                              )}

                              {expBilled > 0 && (
                                <div className="flex justify-between text-amber-800 font-medium pt-1 border-t border-slate-200/60">
                                  <span>実費立替 (P代/交通費):</span>
                                  <span className="font-bold font-mono">¥{expBilled.toLocaleString()}</span>
                                </div>
                              )}
                            </div>
                          </div>

                          <div className="mt-4 pt-2.5 border-t border-slate-200 flex items-baseline justify-between">
                            <span className="text-xs font-bold text-slate-700">
                              {isContractOnly ? '当日実費請求額:' : '当日請求計上額:'}
                            </span>
                            <span className="text-xl font-black text-slate-900 font-mono">
                              ¥{billedToday.toLocaleString()}
                            </span>
                          </div>
                        </div>

                        <div className="md:col-span-7 flex flex-col justify-between">
                          <div>
                            <div className="flex items-center justify-between pb-2 mb-2 border-b border-slate-200">
                              <span className="text-xs font-black text-emerald-900 flex items-center gap-1.5">
                                <Users className="w-4 h-4 text-emerald-600" /> 出役職人・作業区分・支給額
                              </span>
                              <div className="text-xs font-bold text-slate-600">
                                合計: <strong className="text-emerald-700">{workerCount.toFixed(1)} 人工</strong> （¥{workerPay.toLocaleString()}）
                              </div>
                            </div>

                            <div className="space-y-2">
                              {rec.workerDetails.map((w, idx) => {
                                const base = (Number(w.count) || 0) * (Number(w.rate) || 0);
                                const ot = (Number(w.otHours) || 0) * (Number(w.otRate) || 0);
                                const allw = Number(w.allowance) || 0;
                                const subtotal = base + ot + allw;
                                const role = w.workRole || (rec.billingType === 'contract' ? '請負' : '常用');

                                return (
                                  <div key={idx} className="bg-slate-50 p-2.5 rounded-xl border border-slate-200 flex flex-col gap-1">
                                    <div className="flex items-center justify-between">
                                      <div className="flex items-center gap-2 flex-wrap">
                                        <span className="font-extrabold text-slate-900 text-sm">{w.workerName}</span>
                                        
                                        <span className={`text-[10px] font-black px-2 py-0.5 rounded-full ${
                                          role === '請負' 
                                            ? 'bg-purple-100 text-purple-800 border border-purple-200' 
                                            : 'bg-blue-100 text-blue-800 border border-blue-200'
                                        }`}>
                                          {role === '請負' ? '請負作業' : '常用作業'}
                                        </span>

                                        <span className="bg-emerald-100 text-emerald-800 text-xs px-2 py-0.5 rounded-md font-bold">
                                          {w.count} 人工
                                        </span>
                                        {Number(w.otHours) > 0 && (
                                          <span className="text-[11px] bg-indigo-50 text-indigo-700 font-semibold px-1.5 py-0.5 rounded">
                                            残業{w.otHours}h (+¥{ot.toLocaleString()})
                                          </span>
                                        )}
                                        {allw > 0 && (
                                          <span className="text-[11px] bg-teal-50 text-teal-700 font-semibold px-1.5 py-0.5 rounded">
                                            手当+¥{allw.toLocaleString()}
                                          </span>
                                        )}
                                      </div>
                                      <span className="font-mono font-bold text-slate-900 text-sm">
                                        ¥{subtotal.toLocaleString()}
                                      </span>
                                    </div>
                                    {w.note && (
                                      <div className="text-[11px] text-slate-500 pl-1">
                                        <span className="font-semibold text-slate-600">作業/手当メモ:</span> {w.note}
                                      </div>
                                    )}
                                  </div>
                                );
                              })}
                            </div>
                          </div>

                          <div className="mt-3 pt-2 border-t border-slate-100 flex flex-wrap items-center justify-between gap-2 text-xs">
                            <div className="text-slate-500">
                              {rec.memo && <span>📝 <strong className="text-slate-700">現場メモ:</strong> {rec.memo}</span>}
                            </div>
                            <div className="text-xs text-slate-500">
                              職人人件費計: <span className="font-mono font-bold text-slate-800">¥{workerPay.toLocaleString()}</span>
                            </div>
                          </div>

                        </div>

                      </div>

                    </div>
                  );
                })}
              </div>
            )}

          </div>
        )}

        {activeTab === 'contracts' && (
          <div className="space-y-6">
            <div className="bg-white rounded-2xl border border-slate-200 shadow-sm p-4 sm:p-5">
              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 border-b border-slate-200 pb-4 mb-4">
                <div>
                  <h3 className="font-black text-base text-slate-900 flex items-center gap-2">
                    <Briefcase className="w-5 h-5 text-purple-600" />
                    請負現場・出来高請求管理
                  </h3>
                  <p className="text-xs text-slate-500">
                    請負総額（㎡×単価）と各月ごとの請求額、さらに同一現場で発生した「追加常用請求」も連動して確認できます
                  </p>
                </div>
                <button
                  onClick={openNewContractModal}
                  className="flex items-center justify-center gap-1.5 bg-purple-600 hover:bg-purple-500 text-white font-bold px-4 py-2 rounded-xl text-xs shadow transition active:scale-95 cursor-pointer"
                >
                  <Plus className="w-4 h-4" /> 請負現場を新規登録
                </button>
              </div>

              <div className="grid grid-cols-1 gap-4">
                {contracts.map(cnt => {
                  const allBilled = Object.values(cnt.monthlyBillings || {}).reduce((s, a) => s + (Number(a) || 0), 0);
                  const remaining = cnt.totalContractAmount - allBilled;
                  const currentMonthBilled = cnt.monthlyBillings?.[selectedMonth] || 0;

                  const siteRecords = records.filter(r => r.siteName === cnt.siteName);
                  const totalExtraDailyBilled = siteRecords.reduce((sum, r) => {
                    if (r.billingType === 'mixed' || r.billingType === 'daily') {
                      const l = (Number(r.billedCount) || 0) * (Number(r.billingRate) || 0);
                      const k = r.hasKoha ? (Number(r.kohaFee) || 0) : 0;
                      const ot = (Number(r.overtimeHours) || 0) * (Number(r.overtimeRate) || 0);
                      return sum + l + k + ot;
                    }
                    return sum;
                  }, 0);

                  const totalLaborCost = siteRecords.reduce((sum, r) => {
                    return sum + r.workerDetails.reduce((wSum, w) => {
                      const base = (Number(w.count) || 0) * (Number(w.rate) || 0);
                      const ot = (Number(w.otHours) || 0) * (Number(w.otRate) || 0);
                      return wSum + base + ot + (Number(w.allowance) || 0);
                    }, 0);
                  }, 0);

                  const totalSiteRevenue = allBilled + totalExtraDailyBilled;
                  const siteProfit = totalSiteRevenue - totalLaborCost;

                  return (
                    <div key={cnt.id} className="bg-slate-50/70 rounded-2xl border-2 border-purple-100 p-4 sm:p-5 space-y-4">
                      <div className="flex flex-wrap items-start justify-between gap-2">
                        <div>
                          <div className="flex items-center gap-2">
                            <span className="text-xs bg-purple-100 text-purple-800 px-2.5 py-0.5 rounded-full font-black">
                              {cnt.client}
                            </span>
                            <span className="text-base font-black text-slate-900">{cnt.siteName}</span>
                          </div>
                          <div className="text-xs text-slate-500 mt-1">
                            {cnt.calcType === 'area' ? (
                              <span>施工面積: <strong>{cnt.area} ㎡</strong> × 単価: <strong>¥{Number(cnt.unitPrice).toLocaleString()}/㎡</strong></span>
                            ) : (
                              <span>一式請負契約</span>
                            )}
                            {cnt.memo && <span className="ml-2 text-slate-400">（{cnt.memo}）</span>}
                          </div>
                        </div>

                        <div className="flex items-center gap-2">
                          <button
                            onClick={() => openEditContractModal(cnt)}
                            className="p-1.5 text-slate-400 hover:text-purple-600 bg-white rounded-lg border border-slate-200 cursor-pointer"
                            title="編集"
                          >
                            <Edit3 className="w-4 h-4" />
                          </button>
                          <button
                            onClick={() => setContracts(prev => prev.filter(c => c.id !== cnt.id))}
                            className="p-1.5 text-slate-400 hover:text-rose-600 bg-white rounded-lg border border-slate-200 cursor-pointer"
                            title="削除"
                          >
                            <Trash2 className="w-4 h-4" />
                          </button>
                        </div>
                      </div>

                      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 bg-white p-3 rounded-xl border border-purple-100">
                        <div>
                          <span className="text-[10px] text-slate-500 font-bold block">請負契約総額</span>
                          <span className="text-base font-black text-slate-900 font-mono">
                            ¥{cnt.totalContractAmount.toLocaleString()}
                          </span>
                        </div>
                        <div>
                          <span className="text-[10px] text-slate-500 font-bold block">請負累計請求済み額</span>
                          <span className="text-base font-black text-blue-700 font-mono">
                            ¥{allBilled.toLocaleString()}
                          </span>
                        </div>
                        <div>
                          <span className="text-[10px] text-slate-500 font-bold block">残り請負請求残高</span>
                          <span className={`text-base font-black font-mono ${remaining < 0 ? 'text-rose-600' : 'text-emerald-700'}`}>
                            ¥{remaining.toLocaleString()}
                          </span>
                        </div>
                        <div>
                          <span className="text-[10px] text-slate-500 font-bold block">現場トータル粗利</span>
                          <span className={`text-base font-black font-mono ${siteProfit >= 0 ? 'text-amber-700' : 'text-rose-600'}`}>
                            ¥{siteProfit.toLocaleString()}
                          </span>
                          <span className="text-[10px] text-slate-400 block font-sans">
                            (追加常用¥{totalExtraDailyBilled.toLocaleString()}含む)
                          </span>
                        </div>
                      </div>

                      <div className="bg-purple-50/70 p-3.5 rounded-xl border border-purple-200 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                        <div className="flex items-center gap-2">
                          <span className="text-xs font-black text-purple-950 flex items-center gap-1">
                            <DollarSign className="w-4 h-4 text-purple-700" />
                            【{period.label}】の出来高請求額:
                          </span>
                          <span className="text-[11px] text-purple-700 font-medium">※取引先別集計に自動反映されます</span>
                        </div>

                        <div className="flex items-center gap-2">
                          <span className="text-xs font-bold text-slate-600">¥</span>
                          <input
                            type="number"
                            step="1000"
                            min="0"
                            placeholder="例: 100000"
                            value={currentMonthBilled || ''}
                            onChange={(e) => handleUpdateMonthlyContractBilling(cnt.id, selectedMonth, e.target.value)}
                            className="w-36 px-3 py-1.5 text-sm font-black font-mono bg-white border border-purple-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:outline-none"
                          />
                          <span className="text-xs font-bold text-slate-700">円 請求</span>
                        </div>
                      </div>

                    </div>
                  );
                })}
              </div>

            </div>
          </div>
        )}

        {activeTab === 'workers' && (
          <div className="space-y-6">
            <div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
              <div className="px-5 py-4 bg-slate-900 text-white flex items-center justify-between">
                <div>
                  <h3 className="font-black text-base flex items-center gap-2">
                    <Users className="w-5 h-5 text-emerald-400" />
                    職人別 支給額集計（{period.label}）
                  </h3>
                  <p className="text-xs text-slate-400">職人ごとに設定された税込・税抜（外税）区分に基づいて正確に実支給額を算出</p>
                </div>
              </div>

              <div className="overflow-x-auto">
                <table className="w-full text-left text-sm">
                  <thead className="bg-slate-100 text-slate-700 text-xs font-bold border-b border-slate-200">
                    <tr>
                      <th className="px-4 py-3">職人名</th>
                      <th className="px-2 py-3 text-center">税区分</th>
                      <th className="px-3 py-3 text-right">出役日数</th>
                      <th className="px-3 py-3 text-right">常用人工</th>
                      <th className="px-3 py-3 text-right">請負人工</th>
                      <th className="px-3 py-3 text-right">合計人工</th>
                      <th className="px-3 py-3 text-right">基本計+手当</th>
                      <th className="px-3 py-3 text-right">消費税分</th>
                      <th className="px-5 py-3 text-right font-black text-slate-900">実支給額 (振込額)</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100">
                    {workerSummaryList.map(w => (
                      <tr key={w.name} className="hover:bg-slate-50 transition">
                        <td className="px-4 py-3.5 font-bold text-slate-900 text-base">{w.name}</td>
                        <td className="px-2 py-3.5 text-center">
                          {w.taxType === 'exclusive' ? (
                            <span className="text-[10px] font-black bg-purple-100 text-purple-800 border border-purple-200 px-2 py-0.5 rounded-full whitespace-nowrap">
                              税抜 ({w.taxRate}%)
                            </span>
                          ) : (
                            <span className="text-[10px] font-black bg-emerald-100 text-emerald-800 border border-emerald-200 px-2 py-0.5 rounded-full whitespace-nowrap">
                              税込
                            </span>
                          )}
                        </td>
                        <td className="px-3 py-3.5 text-right text-slate-600 font-medium">{w.dayCount} 日</td>
                        <td className="px-3 py-3.5 text-right font-mono text-blue-700">{w.dailyCount.toFixed(2)}</td>
                        <td className="px-3 py-3.5 text-right font-mono text-purple-700">{w.contractCount.toFixed(2)}</td>
                        <td className="px-3 py-3.5 text-right font-black text-emerald-700 text-base">
                          {w.totalCount.toFixed(2)} <span className="text-xs font-bold text-slate-500">人</span>
                        </td>
                        <td className="px-3 py-3.5 text-right font-mono text-slate-700">
                          ¥{w.subtotalPay.toLocaleString()}
                        </td>
                        <td className="px-3 py-3.5 text-right font-mono text-purple-700 font-bold">
                          {w.taxAmount > 0 ? `+¥${w.taxAmount.toLocaleString()}` : '¥0'}
                        </td>
                        <td className="px-5 py-3.5 text-right font-black text-slate-900 text-lg font-mono">
                          ¥{w.totalPay.toLocaleString()}
                        </td>
                      </tr>
                    ))}
                  </tbody>
                  <tfoot className="bg-slate-100/80 font-black border-t-2 border-slate-300">
                    <tr>
                      <td className="px-4 py-3">合計</td>
                      <td className="px-2 py-3 text-center">-</td>
                      <td className="px-3 py-3 text-right">-</td>
                      <td className="px-3 py-3 text-right font-mono">-</td>
                      <td className="px-3 py-3 text-right font-mono">-</td>
                      <td className="px-3 py-3 text-right text-emerald-800 text-base">
                        {summaryTotals.paidCount.toFixed(2)} 人
                      </td>
                      <td className="px-3 py-3 text-right font-mono text-xs">
                        ¥{summaryTotals.totalPaid.toLocaleString()}
                      </td>
                      <td className="px-3 py-3 text-right font-mono text-purple-800 text-xs">
                        ¥{(summaryTotals.totalPaidWithTax - summaryTotals.totalPaid).toLocaleString()}
                      </td>
                      <td className="px-5 py-3 text-right text-xl font-mono text-emerald-950">
                        ¥{summaryTotals.totalPaidWithTax.toLocaleString()}
                      </td>
                    </tr>
                  </tfoot>
                </table>
              </div>
            </div>
          </div>
        )}

        {activeTab === 'clients' && (
          <div className="space-y-6">
            <div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
              <div className="px-5 py-4 bg-slate-900 text-white flex items-center justify-between">
                <div>
                  <h3 className="font-black text-base flex items-center gap-2">
                    <Building2 className="w-5 h-5 text-blue-400" />
                    取引先別 請求集計（{period.label}）
                  </h3>
                  <p className="text-xs text-slate-400">税抜金額で集計し、各社ごとの設定税率（10%/8%/0%）に基づいた消費税額と税込請求額を算出</p>
                </div>
              </div>

              <div className="overflow-x-auto">
                <table className="w-full text-left text-sm">
                  <thead className="bg-slate-100 text-slate-700 text-xs font-bold border-b border-slate-200">
                    <tr>
                      <th className="px-4 py-3">取引先名</th>
                      <th className="px-2 py-3 text-center">税率</th>
                      <th className="px-2 py-3 text-right">常用人工</th>
                      <th className="px-3 py-3 text-right">常用金額 (税抜)</th>
                      <th className="px-3 py-3 text-right">請負出来高 (税抜)</th>
                      <th className="px-2 py-3 text-right">光波/残業/実費</th>
                      <th className="px-3 py-3 text-right font-bold text-slate-700">税抜小計</th>
                      <th className="px-3 py-3 text-right font-bold text-blue-700">消費税額</th>
                      <th className="px-5 py-3 text-right font-black text-slate-900">税込請求総額</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100">
                    {clientSummaryList.map(c => {
                      const others = c.kohaAmount + c.otAmount + c.expAmount;
                      return (
                        <tr key={c.clientName} className="hover:bg-slate-50 transition">
                          <td className="px-4 py-3.5 font-bold text-slate-900 text-base">{c.clientName}</td>
                          <td className="px-2 py-3.5 text-center">
                            <span className="text-[11px] font-bold bg-slate-200 text-slate-800 px-2 py-0.5 rounded-full">
                              {c.taxRate}%
                            </span>
                          </td>
                          <td className="px-2 py-3.5 text-right font-black text-blue-700 text-base">
                            {c.totalCount.toFixed(2)}
                          </td>
                          <td className="px-3 py-3.5 text-right font-mono text-slate-600">
                            ¥{c.laborAmount.toLocaleString()}
                          </td>
                          <td className="px-3 py-3.5 text-right font-mono font-bold text-purple-700">
                            {c.contractAmount > 0 ? `¥${c.contractAmount.toLocaleString()}` : '-'}
                          </td>
                          <td className="px-2 py-3.5 text-right font-mono text-slate-600 text-xs">
                            {others > 0 ? `¥${others.toLocaleString()}` : '-'}
                          </td>
                          <td className="px-3 py-3.5 text-right font-mono font-bold text-slate-900">
                            ¥{c.subtotalAmount.toLocaleString()}
                          </td>
                          <td className="px-3 py-3.5 text-right font-mono font-bold text-blue-700">
                            ¥{c.taxAmount.toLocaleString()}
                          </td>
                          <td className="px-5 py-3.5 text-right font-black text-blue-950 text-lg font-mono">
                            ¥{c.totalAmountWithTax.toLocaleString()}
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                  <tfoot className="bg-slate-100/90 font-black text-slate-900 border-t-2 border-slate-300">
                    <tr>
                      <td className="px-4 py-3">合計</td>
                      <td className="px-2 py-3 text-center">-</td>
                      <td className="px-2 py-3 text-right text-blue-800 text-base">
                        {summaryTotals.billedCount.toFixed(2)} 人
                      </td>
                      <td className="px-3 py-3 text-right font-mono text-xs">
                        ¥{summaryTotals.billedLabor.toLocaleString()}
                      </td>
                      <td className="px-3 py-3 text-right text-purple-800 font-mono text-xs">
                        ¥{summaryTotals.totalContractBilled.toLocaleString()}
                      </td>
                      <td className="px-2 py-3 text-right font-mono text-xs">
                        ¥{(summaryTotals.billedKoha + summaryTotals.billedOT + summaryTotals.billedExp).toLocaleString()}
                      </td>
                      <td className="px-3 py-3 text-right font-mono text-sm">
                        ¥{summaryTotals.totalBilled.toLocaleString()}
                      </td>
                      <td className="px-3 py-3 text-right font-mono text-blue-700 text-sm">
                        ¥{summaryTotals.billedTaxTotal.toLocaleString()}
                      </td>
                      <td className="px-5 py-3 text-right text-xl font-mono text-blue-950">
                        ¥{summaryTotals.totalBilledWithTax.toLocaleString()}
                      </td>
                    </tr>
                  </tfoot>
                </table>
              </div>
            </div>
          </div>
        )}

        {activeTab === 'master' && (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            
            <div className="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm space-y-4">
              <div className="flex items-center justify-between">
                <div>
                  <h3 className="font-black text-base flex items-center gap-2 text-emerald-900">
                    <Users className="w-5 h-5 text-emerald-600" /> 職人マスター設定
                  </h3>
                  <p className="text-xs text-slate-500 mt-0.5">
                    職人ごとに「税込」または「税抜（外税計算）」を選択できます。
                  </p>
                </div>
              </div>

              <div className="space-y-3">
                {workers.map((w, i) => (
                  <div key={w.id} className="p-3 bg-slate-50 rounded-xl border border-slate-200 space-y-2.5">
                    <div className="flex items-center justify-between gap-2">
                      <input
                        type="text"
                        value={w.name}
                        onChange={(e) => {
                          const updated = [...workers];
                          updated[i].name = e.target.value;
                          setWorkers(updated);
                        }}
                        className="px-2 py-1 text-sm font-bold bg-white border border-slate-300 rounded w-28"
                        placeholder="職人名"
                      />
                      
                      <div className="flex items-center gap-1.5 bg-white p-1 rounded-lg border border-slate-200">
                        <span className="text-[10px] text-slate-500 font-bold pl-1">税区分:</span>
                        <select
                          value={w.taxType || 'inclusive'}
                          onChange={(e) => {
                            const updated = [...workers];
                            updated[i].taxType = e.target.value;
                            setWorkers(updated);
                          }}
                          className={`text-xs font-black px-2 py-1 rounded border focus:outline-none cursor-pointer ${
                            w.taxType === 'exclusive'
                              ? 'bg-purple-50 text-purple-900 border-purple-300'
                              : 'bg-emerald-50 text-emerald-900 border-emerald-300'
                          }`}
                        >
                          <option value="inclusive">税込（日当全額）</option>
                          <option value="exclusive">税抜（外税 10%）</option>
                        </select>
                      </div>
                    </div>

                    <div className="grid grid-cols-2 gap-2 text-xs">
                      <div>
                        <span className="text-[10px] text-slate-500 block font-semibold">
                          日当基本額 ({w.taxType === 'exclusive' ? '税抜' : '税込'})
                        </span>
                        <div className="flex items-center gap-1">
                          <input
                            type="number"
                            step="500"
                            value={w.dailyRate}
                            onChange={(e) => {
                              const updated = [...workers];
                              updated[i].dailyRate = Number(e.target.value) || 0;
                              setWorkers(updated);
                            }}
                            className="px-2 py-1 text-xs font-mono bg-white border border-slate-300 rounded w-full"
                          />
                          <span className="text-slate-500">円</span>
                        </div>
                      </div>

                      <div>
                        <span className="text-[10px] text-slate-500 block font-semibold">
                          残業単価(/h) ({w.taxType === 'exclusive' ? '税抜' : '税込'})
                        </span>
                        <div className="flex items-center gap-1">
                          <input
                            type="number"
                            step="100"
                            value={w.overtimeRate}
                            onChange={(e) => {
                              const updated = [...workers];
                              updated[i].overtimeRate = Number(e.target.value) || 0;
                              setWorkers(updated);
                            }}
                            className="px-2 py-1 text-xs font-mono bg-white border border-slate-300 rounded w-full"
                          />
                          <span className="text-slate-500">円</span>
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div className="bg-white p-5 rounded-2xl border border-slate-200 shadow-sm space-y-4">
              <div className="flex items-center justify-between">
                <div>
                  <h3 className="font-black text-base flex items-center gap-2 text-blue-900">
                    <Building2 className="w-5 h-5 text-blue-600" /> 取引先マスター設定
                  </h3>
                  <p className="text-xs text-slate-500 mt-0.5">
                    金額はすべて<strong>【税抜】</strong>で入力してください。適用消費税率も会社別に選択できます。
                  </p>
                </div>
              </div>

              <div className="space-y-3">
                {clients.map((c, i) => (
                  <div key={c.id} className="p-3.5 bg-slate-50 rounded-xl border border-slate-200 space-y-2.5">
                    <div className="flex items-center justify-between gap-2">
                      <input
                        type="text"
                        value={c.name}
                        onChange={(e) => {
                          const updated = [...clients];
                          updated[i].name = e.target.value;
                          setClients(updated);
                        }}
                        className="px-2 py-1 text-sm font-bold bg-white border border-slate-300 rounded flex-1"
                      />

                      <div className="flex items-center gap-1.5 bg-white px-2 py-1 rounded-lg border border-slate-300 shrink-0">
                        <span className="text-[10px] text-slate-600 font-bold">税率:</span>
                        <select
                          value={c.taxRate ?? 10}
                          onChange={(e) => {
                            const updated = [...clients];
                            updated[i].taxRate = Number(e.target.value);
                            setClients(updated);
                          }}
                          className="text-xs font-black bg-transparent focus:outline-none cursor-pointer"
                        >
                          <option value={10}>10% (標準税率)</option>
                          <option value={8}>8% (軽減税率)</option>
                          <option value={0}>0% (非課税・免税)</option>
                        </select>
                      </div>
                    </div>

                    <div className="grid grid-cols-3 gap-2 text-xs">
                      <div>
                        <span className="text-[10px] text-slate-500 block font-semibold">常用単価 (税抜)</span>
                        <div className="flex items-center gap-1">
                          <input
                            type="number"
                            step="500"
                            value={c.billingRate}
                            onChange={(e) => {
                              const updated = [...clients];
                              updated[i].billingRate = Number(e.target.value) || 0;
                              setClients(updated);
                            }}
                            className="px-2 py-1 text-xs font-mono bg-white border border-slate-300 rounded w-full"
                          />
                        </div>
                      </div>
                      <div>
                        <span className="text-[10px] text-slate-500 block font-semibold">光波持込料 (税抜)</span>
                        <div className="flex items-center gap-1">
                          <input
                            type="number"
                            step="500"
                            value={c.kohaRate}
                            onChange={(e) => {
                              const updated = [...clients];
                              updated[i].kohaRate = Number(e.target.value) || 0;
                              setClients(updated);
                            }}
                            className="px-2 py-1 text-xs font-mono bg-white border border-slate-300 rounded w-full"
                          />
                        </div>
                      </div>
                      <div>
                        <span className="text-[10px] text-slate-500 block font-semibold">残業(/h) (税抜)</span>
                        <div className="flex items-center gap-1">
                          <input
                            type="number"
                            step="100"
                            value={c.overtimeRate}
                            onChange={(e) => {
                              const updated = [...clients];
                              updated[i].overtimeRate = Number(e.target.value) || 0;
                              setClients(updated);
                            }}
                            className="px-2 py-1 text-xs font-mono bg-white border border-slate-300 rounded w-full"
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}

      </main>

      {isFormOpen && (
        <div className="fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-xs flex items-center justify-center p-3 sm:p-4 overflow-y-auto">
          <div className="bg-white w-full max-w-2xl rounded-3xl shadow-2xl overflow-hidden my-6 border border-slate-200">
            
            <div className="bg-slate-900 text-white px-6 py-4 flex items-center justify-between">
              <div className="flex items-center gap-2">
                <CalendarIcon className="w-5 h-5 text-amber-400" />
                <h3 className="font-black text-base">
                  {editingRecord ? '現場日報を編集' : '現場日報を登録'}
                </h3>
              </div>
              <button
                onClick={() => setIsFormOpen(false)}
                className="text-slate-400 hover:text-white p-1 rounded-lg text-lg font-bold cursor-pointer"
              >
                ✕
              </button>
            </div>

            <form onSubmit={handleSaveRecord} className="p-5 sm:p-6 space-y-5 max-h-[82vh] overflow-y-auto">
              
              <div>
                <label className="block text-xs font-black text-slate-700 mb-1.5">
                  作業・請求区分を選択 <span className="text-rose-500">*</span>
                </label>
                <div className="grid grid-cols-3 gap-2 bg-slate-100 p-1.5 rounded-2xl">
                  <button
                    type="button"
                    onClick={() => setFormData(prev => ({ ...prev, billingType: 'daily' }))}
                    className={`py-2 rounded-xl text-xs font-black transition flex flex-col items-center justify-center gap-1 cursor-pointer ${
                      formData.billingType === 'daily'
                        ? 'bg-blue-600 text-white shadow-xs'
                        : 'text-slate-600 hover:text-slate-900'
                    }`}
                  >
                    <Building2 className="w-4 h-4" />
                    <span>常用現場 (人工請求)</span>
                  </button>

                  <button
                    type="button"
                    onClick={() => {
                      const firstCnt = contracts[0];
                      setFormData(prev => ({ 
                        ...prev, 
                        billingType: 'mixed',
                        client: firstCnt?.client || prev.client,
                        siteName: firstCnt?.siteName || prev.siteName,
                        contractId: firstCnt?.id || ''
                      }));
                    }}
                    className={`py-2 rounded-xl text-xs font-black transition flex flex-col items-center justify-center gap-1 cursor-pointer ${
                      formData.billingType === 'mixed'
                        ? 'bg-gradient-to-r from-purple-600 to-blue-600 text-white shadow-xs'
                        : 'text-slate-600 hover:text-slate-900'
                    }`}
                  >
                    <Shuffle className="w-4 h-4" />
                    <span>常用＋請負 (両方あり)</span>
                  </button>

                  <button
                    type="button"
                    onClick={() => {
                      const firstCnt = contracts[0];
                      setFormData(prev => ({ 
                        ...prev, 
                        billingType: 'contract',
                        client: firstCnt?.client || prev.client,
                        siteName: firstCnt?.siteName || prev.siteName,
                        contractId: firstCnt?.id || ''
                      }));
                    }}
                    className={`py-2 rounded-xl text-xs font-black transition flex flex-col items-center justify-center gap-1 cursor-pointer ${
                      formData.billingType === 'contract'
                        ? 'bg-purple-600 text-white shadow-xs'
                        : 'text-slate-600 hover:text-slate-900'
                    }`}
                  >
                    <Briefcase className="w-4 h-4" />
                    <span>請負単独 (出来高のみ)</span>
                  </button>
                </div>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label className="block text-xs font-bold text-slate-700 mb-1">
                    作業日付 <span className="text-rose-500">*</span>
                  </label>
                  <input
                    type="date"
                    required
                    value={formData.date}
                    onChange={(e) => setFormData({ ...formData, date: e.target.value })}
                    className="w-full px-3 py-2 text-sm border border-slate-300 rounded-xl focus:ring-2 focus:ring-amber-500 focus:outline-none font-bold font-mono"
                  />
                </div>

                <div>
                  <label className="block text-xs font-bold text-slate-700 mb-1">
                    取引先会社 <span className="text-rose-500">*</span>
                  </label>
                  <select
                    value={formData.client}
                    onChange={(e) => handleClientChange(e.target.value)}
                    className="w-full px-3 py-2 text-sm border border-slate-300 rounded-xl focus:ring-2 focus:ring-amber-500 focus:outline-none bg-white font-bold"
                  >
                    {clients.map(c => (
                      <option key={c.id} value={c.name}>{c.name}</option>
                    ))}
                  </select>
                </div>
              </div>

              <div className="relative">
                <div className="flex items-center justify-between mb-1">
                  <label className="block text-xs font-black text-slate-700">
                    現場名 <span className="text-rose-500">*</span>
                  </label>
                  <span className="text-[11px] text-amber-700 font-bold flex items-center gap-1">
                    <Sparkles className="w-3 h-3" /> 文字入力で過去の現場名を自動予測
                  </span>
                </div>

                {recentSites.length > 0 && (
                  <div className="mb-2 flex flex-wrap items-center gap-1.5 bg-amber-50/60 p-2 rounded-xl border border-amber-200/80">
                    <span className="text-[10px] font-bold text-amber-900 flex items-center gap-1 shrink-0">
                      <History className="w-3 h-3 text-amber-600" /> 最近の現場:
                    </span>
                    {recentSites.map((site) => (
                      <button
                        key={site}
                        type="button"
                        onClick={() => {
                          const targetCnt = contracts.find(c => c.siteName === site);
                          setFormData(prev => ({
                            ...prev,
                            siteName: site,
                            contractId: targetCnt ? targetCnt.id : prev.contractId
                          }));
                          setIsSiteSuggestOpen(false);
                        }}
                        className={`text-[11px] px-2.5 py-1 rounded-lg font-bold border transition flex items-center gap-1 cursor-pointer ${
                          formData.siteName === site
                            ? 'bg-amber-500 text-slate-950 border-amber-600 shadow-2xs'
                            : 'bg-white text-slate-700 border-amber-200 hover:bg-amber-100 hover:text-slate-900'
                        }`}
                      >
                        {site}
                      </button>
                    ))}
                  </div>
                )}

                <div className="relative">
                  <input
                    type="text"
                    required
                    placeholder="例: ○○物流倉庫、駅前ビル改修（1文字打つと候補が出ます）"
                    value={formData.siteName}
                    onFocus={() => setIsSiteSuggestOpen(true)}
                    onChange={(e) => {
                      const val = e.target.value;
                      const matchedCnt = contracts.find(c => c.siteName === val);
                      setFormData(prev => ({ 
                        ...prev, 
                        siteName: val,
                        contractId: matchedCnt ? matchedCnt.id : prev.contractId
                      }));
                      setIsSiteSuggestOpen(true);
                    }}
                    className="w-full px-3.5 py-2.5 text-sm border-2 border-slate-300 rounded-xl focus:ring-2 focus:ring-amber-500 focus:border-amber-500 focus:outline-none font-bold text-slate-900 bg-white"
                  />

                  {formData.siteName && (
                    <button
                      type="button"
                      onClick={() => {
                        setFormData(prev => ({ ...prev, siteName: '' }));
                        setIsSiteSuggestOpen(true);
                      }}
                      className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 text-xs bg-slate-100 hover:bg-slate-200 rounded-full w-5 h-5 flex items-center justify-center cursor-pointer"
                      title="クリア"
                    >
                      ✕
                    </button>
                  )}
                </div>

                {isSiteSuggestOpen && filteredSiteSuggestions.length > 0 && (
                  <div className="absolute z-50 left-0 right-0 mt-1 bg-white border border-slate-200 rounded-2xl shadow-xl overflow-hidden max-h-56 overflow-y-auto">
                    <div className="bg-slate-100 px-3 py-1.5 text-[10px] font-black text-slate-500 flex items-center justify-between border-b border-slate-200">
                      <span>過去・登録済みの現場候補（タップで選択）</span>
                      <button
                        type="button"
                        onClick={() => setIsSiteSuggestOpen(false)}
                        className="text-slate-400 hover:text-slate-700 text-xs cursor-pointer"
                      >
                        閉じる
                      </button>
                    </div>
                    {filteredSiteSuggestions.map((siteName) => {
                      const isContractSite = contracts.some(c => c.siteName === siteName);
                      return (
                        <button
                          key={siteName}
                          type="button"
                          onClick={() => {
                            const targetCnt = contracts.find(c => c.siteName === siteName);
                            setFormData(prev => ({
                              ...prev,
                              siteName: siteName,
                              contractId: targetCnt ? targetCnt.id : prev.contractId,
                              client: targetCnt ? targetCnt.client : prev.client
                            }));
                            setIsSiteSuggestOpen(false);
                          }}
                          className="w-full text-left px-3.5 py-2 hover:bg-amber-50 transition border-b border-slate-100 last:border-0 flex items-center justify-between group cursor-pointer"
                        >
                          <span className="font-bold text-xs text-slate-800 group-hover:text-amber-900">
                            {siteName}
                          </span>
                          <span className="text-[10px] text-slate-400 font-semibold flex items-center gap-1">
                            {isContractSite ? (
                              <span className="bg-purple-100 text-purple-700 px-1.5 py-0.5 rounded font-bold">請負登録済</span>
                            ) : (
                              <span className="bg-slate-100 text-slate-600 px-1.5 py-0.5 rounded">過去現場</span>
                            )}
                          </span>
                        </button>
                      );
                    })}
                  </div>
                )}
              </div>

              {(formData.billingType === 'daily' || formData.billingType === 'mixed') && (
                <div className="bg-blue-50/70 p-4 rounded-2xl border-2 border-blue-100 space-y-3">
                  <div className="text-xs font-black text-blue-950 flex items-center justify-between">
                    <span className="flex items-center gap-1.5">
                      <Building2 className="w-4 h-4 text-blue-600" />
                      {formData.billingType === 'mixed' ? '元請けへの追加常用請求（常用分）' : '取引先への常用請求内容'}
                    </span>
                    <span className="text-[11px] font-bold text-blue-700">※取引先単価を自動反映</span>
                  </div>

                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div className="bg-white p-3 rounded-xl border border-blue-100">
                      <label className="block text-[11px] text-slate-700 font-bold mb-1">
                        常用請求人工数（例: 1人工分なら「1」）
                      </label>
                      <input
                        type="number"
                        step="0.25"
                        min="0"
                        required
                        value={formData.billedCount}
                        onChange={(e) => setFormData({ ...formData, billedCount: e.target.value })}
                        className="w-full px-3 py-1.5 text-sm bg-white border border-slate-300 rounded-lg font-black text-blue-900"
                      />
                    </div>

                    <div className="bg-white p-3 rounded-xl border border-blue-100">
                      <label className="block text-[11px] text-slate-700 font-bold mb-1">
                        常用人工単価 (円/人工)
                      </label>
                      <input
                        type="number"
                        step="500"
                        min="0"
                        value={formData.billingRate}
                        onChange={(e) => setFormData({ ...formData, billingRate: e.target.value })}
                        className="w-full px-3 py-1.5 text-sm bg-white border border-slate-300 rounded-lg font-mono"
                      />
                    </div>
                  </div>

                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div className="bg-white p-3 rounded-xl border border-blue-100 space-y-2">
                      <label className="flex items-center gap-2 cursor-pointer select-none">
                        <input
                          type="checkbox"
                          checked={formData.hasKoha}
                          onChange={(e) => setFormData({ ...formData, hasKoha: e.target.checked })}
                          className="w-4 h-4 text-blue-600 rounded border-slate-300 focus:ring-blue-500"
                        />
                        <span className="text-xs font-bold text-slate-800 flex items-center gap-1">
                          <Compass className="w-3.5 h-3.5 text-sky-600" /> 光波を持込で請求する
                        </span>
                      </label>
                      {formData.hasKoha && (
                        <div>
                          <label className="block text-[10px] text-slate-500 font-semibold">光波持込料金(円)</label>
                          <input
                            type="number"
                            step="500"
                            value={formData.kohaFee}
                            onChange={(e) => setFormData({ ...formData, kohaFee: e.target.value })}
                            className="w-full px-2 py-1 text-xs border border-slate-300 rounded font-mono"
                          />
                        </div>
                      )}
                    </div>

                    <div className="bg-white p-3 rounded-xl border border-blue-100">
                      <div className="text-xs font-bold text-slate-800 flex items-center gap-1 mb-1">
                        <Clock className="w-3.5 h-3.5 text-indigo-600" /> 取引先への残業請求
                      </div>
                      <div className="grid grid-cols-2 gap-2">
                        <div>
                          <label className="block text-[10px] text-slate-500">残業(h)</label>
                          <input
                            type="number"
                            step="0.5"
                            min="0"
                            value={formData.overtimeHours}
                            onChange={(e) => setFormData({ ...formData, overtimeHours: e.target.value })}
                            className="w-full px-2 py-1 text-xs border border-slate-300 rounded font-bold"
                          />
                        </div>
                        <div>
                          <label className="block text-[10px] text-slate-500">単価(円/h)</label>
                          <input
                            type="number"
                            step="100"
                            min="0"
                            value={formData.overtimeRate}
                            onChange={(e) => setFormData({ ...formData, overtimeRate: e.target.value })}
                            className="w-full px-2 py-1 text-xs border border-slate-300 rounded font-mono"
                          />
                        </div>
                      </div>
                    </div>
                  </div>

                </div>
              )}

              <div className="bg-slate-50 p-3 rounded-xl border border-slate-200">
                <div className="text-xs font-bold text-slate-800 flex items-center gap-1 mb-1.5">
                  <Car className="w-3.5 h-3.5 text-amber-600" /> 実費請求（パーキング代・高速交通費）
                </div>
                <div className="grid grid-cols-2 gap-3">
                  <div>
                    <label className="block text-[10px] text-slate-500 font-bold">パーキング実費(円)</label>
                    <input
                      type="number"
                      step="100"
                      min="0"
                      value={formData.parkingFee}
                      onChange={(e) => setFormData({ ...formData, parkingFee: e.target.value })}
                      className="w-full px-2.5 py-1 text-xs bg-white border border-slate-300 rounded font-mono"
                    />
                  </div>
                  <div>
                    <label className="block text-[10px] text-slate-500 font-bold">高速・交通費(円)</label>
                    <input
                      type="number"
                      step="100"
                      min="0"
                      value={formData.transportFee}
                      onChange={(e) => setFormData({ ...formData, transportFee: e.target.value })}
                      className="w-full px-2.5 py-1 text-xs bg-white border border-slate-300 rounded font-mono"
                    />
                  </div>
                </div>
              </div>

              <div className="bg-emerald-50/60 p-4 rounded-2xl border-2 border-emerald-100 space-y-3">
                <div className="flex items-center justify-between">
                  <div className="text-xs font-black text-emerald-950 flex items-center gap-1.5">
                    <Users className="w-4 h-4 text-emerald-700" />
                    出役職人と支給額（日当・残業・手当）
                  </div>
                  <button
                    type="button"
                    onClick={addWorkerRow}
                    className="text-xs bg-emerald-600 hover:bg-emerald-500 text-white font-bold px-3 py-1 rounded-lg flex items-center gap-1 shadow-2xs cursor-pointer"
                  >
                    <Plus className="w-3.5 h-3.5" /> 職人を追加
                  </button>
                </div>

                <div className="space-y-2.5">
                  {formData.workerDetails.map((w, idx) => (
                    <div key={idx} className="bg-white p-3 rounded-xl border border-emerald-200/80 shadow-2xs space-y-2">
                      <div className="grid grid-cols-12 gap-2 items-center">
                        
                        <div className="col-span-4 sm:col-span-3">
                          <label className="block text-[10px] text-slate-500 font-bold">職人名</label>
                          <select
                            value={w.workerName}
                            onChange={(e) => handleWorkerNameChange(idx, e.target.value)}
                            className="w-full px-2 py-1 text-xs border border-slate-300 rounded bg-white font-bold"
                          >
                            {workers.map(item => (
                              <option key={item.id} value={item.name}>{item.name}</option>
                            ))}
                          </select>
                        </div>

                        <div className="col-span-4 sm:col-span-2">
                          <label className="block text-[10px] text-purple-700 font-bold">作業内容</label>
                          <select
                            value={w.workRole || '常用'}
                            onChange={(e) => {
                              const updated = [...formData.workerDetails];
                              updated[idx].workRole = e.target.value;
                              setFormData({ ...formData, workerDetails: updated });
                            }}
                            className="w-full px-1.5 py-1 text-xs border border-purple-300 bg-purple-50/50 rounded font-black text-purple-900"
                          >
                            <option value="請負">請負作業</option>
                            <option value="常用">常用作業</option>
                          </select>
                        </div>

                        <div className="col-span-4 sm:col-span-2">
                          <label className="block text-[10px] text-slate-500 font-bold">支給人工</label>
                          <input
                            type="number"
                            step="0.25"
                            min="0"
                            value={w.count}
                            onChange={(e) => {
                              const updated = [...formData.workerDetails];
                              updated[idx].count = e.target.value;
                              setFormData({ ...formData, workerDetails: updated });
                            }}
                            className="w-full px-2 py-1 text-xs border border-slate-300 rounded font-black text-emerald-700"
                          />
                        </div>

                        <div className="col-span-6 sm:col-span-2">
                          <label className="block text-[10px] text-slate-500 font-bold">日当(円)</label>
                          <input
                            type="number"
                            step="500"
                            min="0"
                            value={w.rate}
                            onChange={(e) => {
                              const updated = [...formData.workerDetails];
                              updated[idx].rate = e.target.value;
                              setFormData({ ...formData, workerDetails: updated });
                            }}
                            className="w-full px-2 py-1 text-xs border border-slate-300 rounded font-mono"
                          />
                        </div>

                        <div className="col-span-3 sm:col-span-1.5">
                          <label className="block text-[10px] text-indigo-700 font-bold">残業(h)</label>
                          <input
                            type="number"
                            step="0.5"
                            min="0"
                            value={w.otHours}
                            onChange={(e) => {
                              const updated = [...formData.workerDetails];
                              updated[idx].otHours = e.target.value;
                              setFormData({ ...formData, workerDetails: updated });
                            }}
                            className="w-full px-1.5 py-1 text-xs border border-indigo-200 rounded font-mono bg-indigo-50/40"
                          />
                        </div>

                        <div className="col-span-3 sm:col-span-1.5">
                          <label className="block text-[10px] text-teal-700 font-bold">手当(円)</label>
                          <input
                            type="number"
                            step="500"
                            min="0"
                            value={w.allowance}
                            onChange={(e) => {
                              const updated = [...formData.workerDetails];
                              updated[idx].allowance = e.target.value;
                              setFormData({ ...formData, workerDetails: updated });
                            }}
                            className="w-full px-1.5 py-1 text-xs border border-teal-200 rounded font-mono bg-teal-50/40"
                          />
                        </div>

                        <div className="col-span-12 flex items-center justify-between gap-2 pt-1 border-t border-slate-100">
                          <input
                            type="text"
                            placeholder="手当理由・移動メモ（例: 追加下地補修、移動手当+2000等）"
                            value={w.note || ''}
                            onChange={(e) => {
                              const updated = [...formData.workerDetails];
                              updated[idx].note = e.target.value;
                              setFormData({ ...formData, workerDetails: updated });
                            }}
                            className="w-full px-2 py-1 text-[11px] bg-slate-50 border border-slate-200 rounded text-slate-600 placeholder:text-slate-400"
                          />
                          <button
                            type="button"
                            disabled={formData.workerDetails.length <= 1}
                            onClick={() => removeWorkerRow(idx)}
                            className="p-1 text-slate-400 hover:text-rose-600 disabled:opacity-30 shrink-0 cursor-pointer"
                            title="削除"
                          >
                            <Trash2 className="w-4 h-4" />
                          </button>
                        </div>

                      </div>
                    </div>
                  ))}
                </div>
              </div>

              <div>
                <label className="block text-xs font-bold text-slate-700 mb-1">現場メモ</label>
                <textarea
                  rows="2"
                  placeholder="元請けとのやり取り、請負と常用の作業内容メモなど"
                  value={formData.memo}
                  onChange={(e) => setFormData({ ...formData, memo: e.target.value })}
                  className="w-full px-3 py-2 text-xs border border-slate-300 rounded-xl focus:ring-2 focus:ring-amber-500 focus:outline-none"
                />
              </div>

              <div className="flex items-center justify-end gap-3 pt-3 border-t border-slate-200">
                <button
                  type="button"
                  onClick={() => setIsFormOpen(false)}
                  className="px-4 py-2.5 text-xs font-bold text-slate-600 hover:bg-slate-100 rounded-xl transition cursor-pointer"
                >
                  キャンセル
                </button>
                <button
                  type="submit"
                  className="px-6 py-2.5 text-xs font-black bg-gradient-to-r from-amber-500 to-amber-400 hover:from-amber-400 hover:to-amber-300 text-slate-950 rounded-xl shadow-md transition cursor-pointer"
                >
                  {editingRecord ? '保存する' : '登録する'}
                </button>
              </div>

            </form>

          </div>
        </div>
      )}

      {isContractModalOpen && (
        <div className="fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-xs flex items-center justify-center p-3 sm:p-4 overflow-y-auto">
          <div className="bg-white w-full max-w-lg rounded-3xl shadow-2xl overflow-hidden my-6 border border-slate-200">
            <div className="bg-purple-900 text-white px-6 py-4 flex items-center justify-between">
              <div className="flex items-center gap-2">
                <Briefcase className="w-5 h-5 text-purple-300" />
                <h3 className="font-black text-base">
                  {editingContract ? '請負現場を編集' : '請負現場を新規登録'}
                </h3>
              </div>
              <button
                onClick={() => setIsContractModalOpen(false)}
                className="text-slate-400 hover:text-white p-1 rounded-lg text-lg font-bold cursor-pointer"
              >
                ✕
              </button>
            </div>

            <form onSubmit={saveContract} className="p-5 space-y-4">
              <div>
                <label className="block text-xs font-bold text-slate-700 mb-1">取引先会社 <span className="text-rose-500">*</span></label>
                <select
                  value={contractFormData.client}
                  onChange={(e) => setContractFormData({ ...contractFormData, client: e.target.value })}
                  className="w-full px-3 py-2 text-sm border border-slate-300 rounded-xl font-bold bg-white"
                >
                  {clients.map(c => (
                    <option key={c.id} value={c.name}>{c.name}</option>
                  ))}
                </select>
              </div>

              <div>
                <label className="block text-xs font-bold text-slate-700 mb-1">請負現場名 <span className="text-rose-500">*</span></label>
                <input
                  type="text"
                  required
                  placeholder="例: 南草津物流倉庫 外壁工事"
                  value={contractFormData.siteName}
                  onChange={(e) => setContractFormData({ ...contractFormData, siteName: e.target.value })}
                  className="w-full px-3 py-2 text-sm border border-slate-300 rounded-xl font-bold"
                />
              </div>

              <div className="bg-slate-50 p-3.5 rounded-xl border border-slate-200 space-y-3">
                <div className="flex gap-4 text-xs font-bold text-slate-800">
                  <label className="flex items-center gap-1.5 cursor-pointer">
                    <input
                      type="radio"
                      name="calcType"
                      checked={contractFormData.calcType === 'area'}
                      onChange={() => setContractFormData({ ...contractFormData, calcType: 'area' })}
                    />
                    ㎡単価で計算（面積 × 単価）
                  </label>
                  <label className="flex items-center gap-1.5 cursor-pointer">
                    <input
                      type="radio"
                      name="calcType"
                      checked={contractFormData.calcType === 'lump'}
                      onChange={() => setContractFormData({ ...contractFormData, calcType: 'lump' })}
                    />
                    一式請負金額で入力
                  </label>
                </div>

                {contractFormData.calcType === 'area' && (
                  <div className="grid grid-cols-2 gap-3">
                    <div>
                      <label className="block text-[11px] text-slate-600 font-bold">施工面積 (㎡)</label>
                      <input
                        type="number"
                        step="1"
                        min="0"
                        value={contractFormData.area}
                        onChange={(e) => {
                          const a = Number(e.target.value) || 0;
                          setContractFormData({
                            ...contractFormData,
                            area: a,
                            totalContractAmount: a * (Number(contractFormData.unitPrice) || 0)
                          });
                        }}
                        className="w-full px-3 py-1.5 text-sm border border-slate-300 rounded-lg font-mono"
                      />
                    </div>
                    <div>
                      <label className="block text-[11px] text-slate-600 font-bold">㎡単価 (円/㎡)</label>
                      <input
                        type="number"
                        step="100"
                        min="0"
                        value={contractFormData.unitPrice}
                        onChange={(e) => {
                          const u = Number(e.target.value) || 0;
                          setContractFormData({
                            ...contractFormData,
                            unitPrice: u,
                            totalContractAmount: (Number(contractFormData.area) || 0) * u
                          });
                        }}
                        className="w-full px-3 py-1.5 text-sm border border-slate-300 rounded-lg font-mono"
                      />
                    </div>
                  </div>
                )}

                <div className="pt-2 border-t border-slate-200">
                  <label className="block text-[11px] text-purple-900 font-black">請負契約総額 (円・税別)</label>
                  <input
                    type="number"
                    step="1000"
                    min="0"
                    value={contractFormData.totalContractAmount}
                    onChange={(e) => setContractFormData({ ...contractFormData, totalContractAmount: e.target.value })}
                    className="w-full px-3 py-2 text-base font-black font-mono border-2 border-purple-300 rounded-lg bg-white text-purple-950"
                  />
                </div>
              </div>

              <div>
                <label className="block text-xs font-bold text-slate-700 mb-1">契約メモ</label>
                <input
                  type="text"
                  placeholder="例: 足場解体後に最終請求予定。追加作業は別途常用請求可。"
                  value={contractFormData.memo}
                  onChange={(e) => setContractFormData({ ...contractFormData, memo: e.target.value })}
                  className="w-full px-3 py-2 text-xs border border-slate-300 rounded-xl"
                />
              </div>

              <div className="flex justify-end gap-2 pt-3 border-t border-slate-200">
                <button
                  type="button"
                  onClick={() => setIsContractModalOpen(false)}
                  className="px-4 py-2 text-xs font-bold text-slate-600 hover:bg-slate-100 rounded-xl cursor-pointer"
                >
                  キャンセル
                </button>
                <button
                  type="submit"
                  className="px-5 py-2 text-xs font-black bg-purple-600 hover:bg-purple-500 text-white rounded-xl shadow cursor-pointer"
                >
                  保存する
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {deleteTargetId && (
        <div className="fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-xs flex items-center justify-center p-4">
          <div className="bg-white rounded-2xl max-w-sm w-full p-6 text-center shadow-2xl border border-slate-200">
            <AlertCircle className="w-12 h-12 text-rose-500 mx-auto mb-3" />
            <h4 className="font-extrabold text-slate-900 text-base mb-1">この現場記録を削除しますか？</h4>
            <p className="text-xs text-slate-500 mb-5">削除すると元に戻せません。集計からも除外されます。</p>
            <div className="flex justify-center gap-3">
              <button
                onClick={() => setDeleteTargetId(null)}
                className="px-4 py-2 text-xs font-bold text-slate-600 hover:bg-slate-100 rounded-xl transition cursor-pointer"
              >
                キャンセル
              </button>
              <button
                onClick={() => handleDeleteRecord(deleteTargetId)}
                className="px-5 py-2 text-xs font-bold bg-rose-600 hover:bg-rose-500 text-white rounded-xl shadow transition cursor-pointer"
              >
                削除する
              </button>
            </div>
          </div>
        </div>
      )}

    </div>
  );
}