import React, { useState, useMemo, useEffect } from 'react';
import { 
  ComposedChart, Scatter, Line, Bar, XAxis, YAxis, CartesianGrid, 
  Tooltip, Legend, ResponsiveContainer 
} from 'recharts';
import { Calculator, FileText, Plus, Trash2, RefreshCw, Printer, Settings2 } from 'lucide-react';

export default function PhotoelectricExperiment() {
  // 1. 상태 관리 (State)
  const [data, setData] = useState([
    { id: 1, x: 10, y: 105 },
    { id: 2, x: 15, y: 45 },
    { id: 3, x: 20, y: 24 },
    { id: 4, x: 25, y: 17 },
    { id: 5, x: 30, y: 11 },
  ]);
  const [graphType, setGraphType] = useState('scatter'); // 'scatter', 'line', 'bar'
  const [showTheory, setShowTheory] = useState(true);

  // 2. 데이터 제어 함수
  const handleDataChange = (id, field, value) => {
    setData(data.map(d => d.id === id ? { ...d, [field]: Number(value) } : d));
  };

  const addRow = () => {
    const newId = data.length > 0 ? Math.max(...data.map(d => d.id)) + 1 : 1;
    const lastX = data.length > 0 ? Math.max(...data.map(d => d.x)) + 5 : 10;
    setData([...data, { id: newId, x: lastX, y: 0 }]);
  };

  const removeRow = (id) => {
    setData(data.filter(d => d.id !== id));
  };

  // 노이즈가 섞인 가상의 실험 데이터 생성 함수
  const loadRandomData = () => {
    const distances = [5, 10, 15, 20, 25, 30, 35, 40];
    const k = 10000; // 가상의 비례 상수
    const newData = distances.map((d, i) => {
      // 이론값에 ±10% 의 무작위 실험 오차 추가
      const noise = 0.9 + Math.random() * 0.2; 
      const yValue = (k / (d * d)) * noise;
      return {
        id: i + 1,
        x: d,
        y: Number(yValue.toFixed(1))
      };
    });
    setData(newData);
  };

  // PDF 보고서 인쇄 호출
  const handlePrint = () => {
    window.print();
  };

  // 3. 물리 및 통계 연산 (오차 분석 및 이론값 도출)
  // 이론: 광전류(i) = k / 거리(d)^2
  // 따라서 k = i * d^2. 측정된 모든 데이터에서 k값을 구하고 평균을 내어 기준 상수로 사용.
  const analysis = useMemo(() => {
    if (data.length === 0) return { k: 0, processedData: [], avgError: 0 };

    let sumK = 0;
    let validCount = 0;

    // 비례 상수 K 계산
    data.forEach(d => {
      if (d.x > 0 && d.y > 0) {
        sumK += d.y * (d.x * d.x);
        validCount++;
      }
    });
    const avgK = validCount > 0 ? sumK / validCount : 0;

    let totalError = 0;
    let errorCount = 0;

    // 처리된 데이터 및 각 포인트별 오차율 계산
    const processedData = [...data]
      .sort((a, b) => a.x - b.x) // X축 정렬 (Line 그래프 시각화 오류 방지)
      .map(d => {
        const theory = d.x > 0 ? (avgK / (d.x * d.x)) : 0;
        const error = theory > 0 ? (Math.abs(d.y - theory) / theory) * 100 : 0;
        
        if (theory > 0) {
          totalError += error;
          errorCount++;
        }

        return {
          ...d,
          theory: Number(theory.toFixed(1)),
          error: Number(error.toFixed(2))
        };
      });

    const avgError = errorCount > 0 ? totalError / errorCount : 0;

    return { k: avgK, processedData, avgError };
  }, [data]);

  // 커스텀 툴팁
  const CustomTooltip = ({ active, payload, label }) => {
    if (active && payload && payload.length) {
      return (
        <div className="bg-white p-3 border border-gray-200 shadow-md rounded-md">
          <p className="font-bold text-gray-700">{`거리: ${label} cm`}</p>
          <p className="text-blue-600">{`측정값: ${payload[0]?.value} μA`}</p>
          {payload[1] && <p className="text-red-500">{`이론값: ${payload[1]?.value} μA`}</p>}
        </div>
      );
    }
    return null;
  };

  return (
    <>
      {/* 인쇄(PDF) 전용 스타일링 설정 */}
      <style>{`
        @media print {
          body { background-color: white !important; }
          .no-print { display: none !important; }
          .print-only { display: block !important; }
          .print-break-avoid { page-break-inside: avoid; }
          .shadow-lg, .shadow-md { box-shadow: none !important; }
          .bg-gray-50 { background-color: white !important; }
        }
        @page { size: A4 portrait; margin: 20mm; }
      `}</style>

      <div className="min-h-screen bg-gray-50 p-4 md:p-8 font-sans text-gray-800">
        <div className="max-w-7xl mx-auto flex flex-col lg:flex-row gap-6">
          
          {/* =========================================
              좌측: 제어 패널 (데이터 입력 및 설정) 
              (인쇄 시 숨김 처리됨: no-print)
          ========================================= */}
          <div className="w-full lg:w-1/3 space-y-6 no-print">
            
            {/* 데이터 입력 섹션 */}
            <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
              <div className="flex items-center justify-between mb-4">
                <h2 className="text-lg font-bold flex items-center gap-2">
                  <Calculator size={20} className="text-blue-600"/>
                  데이터 입력
                </h2>
                <button 
                  onClick={loadRandomData}
                  className="text-xs flex items-center gap-1 bg-gray-100 hover:bg-gray-200 text-gray-700 py-1.5 px-3 rounded-md transition"
                >
                  <RefreshCw size={14}/>
                  예시 생성
                </button>
              </div>

              <div className="space-y-3">
                <div className="grid grid-cols-5 gap-2 text-sm font-semibold text-gray-600 text-center pb-2 border-b">
                  <div className="col-span-2">거리 (cm)</div>
                  <div className="col-span-2">광전류 (μA)</div>
                  <div className="col-span-1"></div>
                </div>
                
                {data.map((row) => (
                  <div key={row.id} className="grid grid-cols-5 gap-2 items-center">
                    <div className="col-span-2">
                      <input 
                        type="number" 
                        value={row.x} 
                        onChange={(e) => handleDataChange(row.id, 'x', e.target.value)}
                        className="w-full border rounded-md p-2 text-center focus:ring-2 focus:ring-blue-500 focus:outline-none"
                      />
                    </div>
                    <div className="col-span-2">
                      <input 
                        type="number" 
                        value={row.y} 
                        onChange={(e) => handleDataChange(row.id, 'y', e.target.value)}
                        className="w-full border rounded-md p-2 text-center focus:ring-2 focus:ring-blue-500 focus:outline-none"
                      />
                    </div>
                    <div className="col-span-1 flex justify-center">
                      <button 
                        onClick={() => removeRow(row.id)}
                        className="p-2 text-red-500 hover:bg-red-50 rounded-md transition"
                      >
                        <Trash2 size={16} />
                      </button>
                    </div>
                  </div>
                ))}
              </div>

              <button 
                onClick={addRow}
                className="mt-4 w-full py-2 border-2 border-dashed border-gray-300 text-gray-600 rounded-lg hover:border-blue-500 hover:text-blue-600 flex items-center justify-center gap-2 transition"
              >
                <Plus size={18} />
                행 추가
              </button>
            </div>

            {/* 그래프 및 보고서 설정 섹션 */}
            <div className="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
              <h2 className="text-lg font-bold flex items-center gap-2 mb-4">
                <Settings2 size={20} className="text-purple-600"/>
                그래프 및 보고서 설정
              </h2>
              
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-2">그래프 형태</label>
                  <select 
                    value={graphType} 
                    onChange={(e) => setGraphType(e.target.value)}
                    className="w-full border rounded-md p-2 focus:ring-2 focus:ring-purple-500 focus:outline-none bg-white"
                  >
                    <option value="scatter">산점도 (Scatter)</option>
                    <option value="line">꺾은선 (Line)</option>
                    <option value="bar">막대형 (Bar)</option>
                  </select>
                </div>

                <div className="flex items-center gap-2 mt-4 p-3 bg-red-50 rounded-lg text-red-800">
                  <input 
                    type="checkbox" 
                    id="theoryToggle"
                    checked={showTheory} 
                    onChange={(e) => setShowTheory(e.target.checked)}
                    className="w-4 h-4 text-red-600 rounded border-red-300 focus:ring-red-500"
                  />
                  <label htmlFor="theoryToggle" className="text-sm font-semibold cursor-pointer">
                    역제곱 법칙(1/r²) 이론 곡선 표시
                  </label>
                </div>

                <button 
                  onClick={handlePrint}
                  className="mt-6 w-full py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center gap-2 font-bold transition shadow-md"
                >
                  <Printer size={20} />
                  PDF 보고서 자동 생성
                </button>
              </div>
            </div>

          </div>

          {/* =========================================
              우측: 결과 및 보고서 패널 
              (인쇄 시 전체 화면을 채우도록 동작)
          ========================================= */}
          <div className="w-full lg:w-2/3 space-y-6">
            <div className="bg-white p-8 rounded-xl shadow-sm border border-gray-200">
              
              {/* 보고서 헤더 */}
              <div className="border-b-2 border-gray-800 pb-4 mb-8 text-center">
                <h1 className="text-3xl font-bold text-gray-900 mb-2">백열등의 광전류 측정 실험</h1>
                <p className="text-gray-600 font-medium">역제곱 법칙 (Inverse Square Law) 검증 및 오차 분석</p>
              </div>

              {/* 그래프 영역 */}
              <div className="mb-8 print-break-avoid">
                <h3 className="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
                  <FileText size={20} className="text-blue-600 no-print" />
                  실험 결과 그래프
                </h3>
                <div className="w-full h-[400px] border border-gray-100 rounded-lg bg-white p-4">
                  <ResponsiveContainer width="100%" height="100%">
                    <ComposedChart data={analysis.processedData} margin={{ top: 20, right: 20, bottom: 20, left: 0 }}>
                      <CartesianGrid strokeDasharray="3 3" stroke="#f0f0f0" />
                      <XAxis 
                        dataKey="x" 
                        type="number" 
                        domain={['dataMin - 5', 'dataMax + 5']} 
                        name="거리" 
                        label={{ value: '광원과의 거리 d (cm)', position: 'insideBottom', offset: -10 }} 
                      />
                      <YAxis 
                        label={{ value: '광전류 I (μA)', angle: -90, position: 'insideLeft', offset: 10 }} 
                      />
                      <Tooltip content={<CustomTooltip />} />
                      <Legend verticalAlign="top" height={36}/>
                      
                      {/* 실제 측정 데이터 그래프 */}
                      {graphType === 'scatter' && <Scatter name="실제 측정값" dataKey="y" fill="#2563eb" />}
                      {graphType === 'line' && <Line name="실제 측정값" type="monotone" dataKey="y" stroke="#2563eb" strokeWidth={2} activeDot={{ r: 6 }} />}
                      {graphType === 'bar' && <Bar name="실제 측정값" dataKey="y" fill="#60a5fa" radius={[4, 4, 0, 0]} maxBarSize={40} />}
                      
                      {/* 이론값 곡선 */}
                      {showTheory && (
                        <Line 
                          name={`이론값 ( I = ${analysis.k.toFixed(0)} / d² )`} 
                          type="monotone" 
                          dataKey="theory" 
                          stroke="#ef4444" 
                          strokeWidth={2} 
                          strokeDasharray="5 5" 
                          dot={false} 
                          activeDot={false}
                        />
                      )}
                    </ComposedChart>
                  </ResponsiveContainer>
                </div>
              </div>

              {/* 오차 분석 및 데이터 표 영역 */}
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8 print-break-avoid">
                {/* 데이터 테이블 */}
                <div>
                  <h3 className="text-lg font-bold text-gray-800 mb-4">측정 및 분석 데이터</h3>
                  <div className="overflow-hidden border border-gray-200 rounded-lg">
                    <table className="w-full text-sm text-center">
                      <thead className="bg-gray-50 border-b">
                        <tr>
                          <th className="py-3 px-2 text-gray-700">거리(cm)</th>
                          <th className="py-3 px-2 text-blue-700">측정값(μA)</th>
                          <th className="py-3 px-2 text-red-700">이론값(μA)</th>
                          <th className="py-3 px-2 text-gray-700">오차율(%)</th>
                        </tr>
                      </thead>
                      <tbody className="divide-y divide-gray-100">
                        {analysis.processedData.map((row, idx) => (
                          <tr key={idx} className="hover:bg-gray-50 transition">
                            <td className="py-2.5 px-2 font-medium">{row.x}</td>
                            <td className="py-2.5 px-2 text-blue-600 font-semibold">{row.y}</td>
                            <td className="py-2.5 px-2 text-red-500">{row.theory}</td>
                            <td className="py-2.5 px-2">
                              <span className={`px-2 py-1 rounded-md text-xs font-bold ${row.error < 5 ? 'bg-green-100 text-green-700' : row.error < 15 ? 'bg-yellow-100 text-yellow-700' : 'bg-red-100 text-red-700'}`}>
                                {row.error}%
                              </span>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </div>

                {/* 결과 요약 및 오차 분석 */}
                <div className="flex flex-col justify-between">
                  <div>
                    <h3 className="text-lg font-bold text-gray-800 mb-4">실험 결과 요약</h3>
                    <div className="bg-gray-50 p-5 rounded-lg border border-gray-200 space-y-4">
                      <div>
                        <p className="text-sm text-gray-500 mb-1">도출된 비례 상수 (K)</p>
                        <p className="text-2xl font-bold text-gray-800">{analysis.k.toLocaleString(undefined, { maximumFractionDigits: 1 })}</p>
                        <p className="text-xs text-gray-500 mt-1">※ 광전류 = K / 거리² 모델에 피팅된 상수입니다.</p>
                      </div>
                      <div className="border-t border-gray-200 pt-4">
                        <p className="text-sm text-gray-500 mb-1">평균 오차율 (Mean Error)</p>
                        <div className="flex items-baseline gap-2">
                          <p className="text-2xl font-bold text-gray-800">{analysis.avgError.toFixed(2)} %</p>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div className="mt-6 p-4 bg-blue-50 text-blue-900 border border-blue-100 rounded-lg text-sm leading-relaxed">
                    <p className="font-bold mb-1">■ 종합 결론</p>
                    {analysis.avgError < 10 ? (
                      <p>평균 오차율이 10% 미만으로 도출되었습니다. 이는 <strong>빛의 세기가 거리의 제곱에 반비례한다는 역제곱 법칙(Inverse Square Law)을 매우 잘 만족</strong>함을 보여줍니다. 광전효과 실험을 성공적으로 수행하였습니다.</p>
                    ) : (
                      <p>오차율이 다소 존재합니다. 이는 백열등이 완벽한 점광원(Point Source)이 아니거나, 주변 암막 상태 및 빛의 반사, 필터의 투과율 등의 외부 요인으로 인한 계통 오차일 수 있습니다.</p>
                    )}
                  </div>
                </div>

              </div>
              
              {/* 인쇄용 워터마크/하단 영역 */}
              <div className="hidden print-only mt-12 pt-4 border-t border-gray-300 text-center text-sm text-gray-500">
                <p>본 보고서는 [백열등 광전류 측정 분석기] 웹 애플리케이션에 의해 자동 생성되었습니다.</p>
              </div>

            </div>
          </div>

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