import React from 'react';
import { Input } from '../Input';
import { Select } from '../Select';
import { Droplets, Thermometer, Sun } from 'lucide-react';

interface SurfaceTreatmentFormProps {
    formData: any;
    handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => void;
    handleReadingChange: (index: number, value: string) => void;
}

export const SurfaceTreatmentForm: React.FC<SurfaceTreatmentFormProps> = ({ formData, handleChange, handleReadingChange }) => {

    // Calculate stats
    const readings = (formData.roughnessReadings || []).map((r: any) => parseFloat(r)).filter((r: number) => !isNaN(r));
    const minR = readings.length > 0 ? Math.min(...readings) : 0;
    const maxR = readings.length > 0 ? Math.max(...readings) : 0;
    const avgR = readings.length > 0 ? readings.reduce((a: number, b: number) => a + b, 0) / readings.length : 0;

    return (
        <div className="space-y-6 animate-in fade-in slide-in-from-right-4 duration-500">
            {/* Header Info */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <Input name="batch" label="Lote / Referência" value={formData.batch || ''} onChange={handleChange} required placeholder="Ex: Lote A-123" />
                <Input name="treatmentExecutor" label="Executante" value={formData.treatmentExecutor || ''} onChange={handleChange} required placeholder="Nome do Jatista/Empresa" />
            </div>

            {/* Treatment Details */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <Select
                    name="treatmentType"
                    label="Tipo de Tratamento"
                    value={formData.treatmentType || ''}
                    onChange={handleChange}
                    options={[
                        { label: 'Jateamento Abrasivo Seco', value: 'dry_abrasive_blasting' },
                        { label: 'Hidrojateamento', value: 'water_jetting' },
                        { label: 'Limpeza Mecânica (St2/St3)', value: 'mechanical_cleaning' },
                        { label: 'Limpeza Manual', value: 'manual_cleaning' },
                        { label: 'Outro', value: 'other' }
                    ]}
                    required
                />
                <Select
                    name="cleaningDegree"
                    label="Grau de Limpeza"
                    value={formData.cleaningDegree || ''}
                    onChange={handleChange}
                    options={[
                        { label: 'Sa 1 (Jato Ligeiro)', value: 'Sa 1' },
                        { label: 'Sa 2 (Comercial)', value: 'Sa 2' },
                        { label: 'Sa 2½ (Metal Quase Branco)', value: 'Sa 2.5' },
                        { label: 'Sa 3 (Metal Branco)', value: 'Sa 3' },
                        { label: 'St 2 (Manual)', value: 'St 2' },
                        { label: 'St 3 (Mecânica)', value: 'St 3' },
                        { label: 'WJ-1', value: 'WJ-1' },
                        { label: 'WJ-2', value: 'WJ-2' },
                        { label: 'WJ-3', value: 'WJ-3' },
                        { label: 'WJ-4', value: 'WJ-4' }
                    ]}
                    required
                />
                <Select
                    name="flashRust"
                    label="Flash Rust"
                    value={formData.flashRust || ''}
                    onChange={handleChange}
                    options={[
                        { label: 'Ausente', value: 'none' },
                        { label: 'Leve (Grau L)', value: 'light' },
                        { label: 'Médio (Grau M)', value: 'medium' },
                        { label: 'Pesado (Grau H)', value: 'heavy' }
                    ]}
                />
            </div>

            {/* Environmental Conditions */}
            <div className="bg-surface-soft border border-border/40 rounded-xl p-4">
                <span className="text-[10px] font-bold text-primary uppercase tracking-[0.15em] block mb-3">Condições Ambientais</span>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div className="relative">
                        <Thermometer className="absolute left-3 top-1/2 -translate-y-1/2 text-text-muted w-4 h-4" />
                        <Input
                            name="temperature"
                            label="Temperatura (°C)"
                            type="number"
                            value={formData.temperature || ''}
                            onChange={handleChange}
                            className="pl-10"
                        />
                    </div>
                    <div className="relative">
                        <Droplets className="absolute left-3 top-1/2 -translate-y-1/2 text-text-muted w-4 h-4" />
                        <Input
                            name="relativeHumidity"
                            label="Umidade Relativa (%)"
                            type="number"
                            value={formData.relativeHumidity || ''}
                            onChange={handleChange}
                            className="pl-10"
                        />
                    </div>
                    <div className="relative">
                        <Sun className="absolute left-3 top-1/2 -translate-y-1/2 text-text-muted w-4 h-4" />
                        <Select
                            name="period"
                            label="Período"
                            value={formData.period || ''}
                            onChange={handleChange}
                            options={[
                                { label: 'Manhã', value: 'morning' },
                                { label: 'Tarde', value: 'afternoon' },
                                { label: 'Noite', value: 'night' }
                            ]}
                            className="pl-10"
                        />
                    </div>
                </div>
            </div>

            {/* Roughness Readings */}
            <div className="border border-border/30 rounded-2xl p-4 bg-surface-soft shadow-sm">
                <label className="text-[10px] font-black text-text-main uppercase tracking-[0.2em] block mb-4">Medições de Rugosidade (µm) • 5 Leituras</label>
                <div className="grid grid-cols-5 gap-2">
                    {formData.roughnessReadings.map((reading: string, index: number) => (
                        <div key={index} className="flex flex-col">
                            <span className="text-[10px] text-text-muted mb-0.5 ml-1 text-center">{index + 1}</span>
                            <input
                                type="number"
                                className="w-full p-2 text-sm text-center rounded-lg border border-border bg-[var(--input-bg)] text-[var(--input-text)] focus:ring-1 focus:ring-primary outline-none transition-all font-bold"
                                value={reading}
                                onChange={(e) => handleReadingChange(index, e.target.value)}
                                placeholder="-"
                            />
                        </div>
                    ))}
                </div>

                {/* Stats */}
                <div className="mt-4 grid grid-cols-3 gap-3 pt-3 border-t border-border/20">
                    <div className="flex flex-col items-center p-2 rounded-lg bg-surface border border-border/20">
                        <span className="text-[9px] uppercase font-bold text-text-muted">Mín</span>
                        <span className="text-sm font-black text-text-main">{minR.toFixed(0)}</span>
                    </div>
                    <div className="flex flex-col items-center p-2 rounded-lg bg-surface border border-border/20">
                        <span className="text-[9px] uppercase font-bold text-text-muted">Máx</span>
                        <span className="text-sm font-black text-text-main">{maxR.toFixed(0)}</span>
                    </div>
                    <div className="flex flex-col items-center p-2 rounded-lg bg-primary/10 border border-primary/20">
                        <span className="text-[9px] uppercase font-bold text-primary">Média</span>
                        <span className="text-sm font-black text-primary">{avgR.toFixed(1)}</span>
                    </div>
                </div>
            </div>
        </div>
    );
};
