'use client'

import { useState } from 'react'
import API_URL from '@/lib/api'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Calculator, Download } from 'lucide-react'

interface JourneyFormProps {
  onDataCalculated: (data: any) => void
  setLoading: (loading: boolean) => void
  onFormDataChange: (formData: any) => void
}

export default function JourneyForm({ onDataCalculated, setLoading, onFormDataChange }: JourneyFormProps) {
  const [formData, setFormData] = useState({
    username: '',
    password: '',
    startDate: new Date().toISOString().slice(0, 10),
    endDate: new Date().toISOString().slice(0, 10),
    startKm: '',
    endKm: '',
    vehicleRegistration: '4SH1148',
    variance: '0.1'
  })

  const [error, setError] = useState('')

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError('')
    setLoading(true)

    try {
      const response = await fetch(`${API_URL}/api/calculate`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          username: formData.username,
          password: formData.password,
          start_date: formData.startDate,
          end_date: formData.endDate,
          start_km: parseInt(formData.startKm),
          end_km: parseInt(formData.endKm),
          vehicle_registration: formData.vehicleRegistration,
          variance: parseFloat(formData.variance)
        }),
      })

      if (!response.ok) {
        const errorData = await response.json()
        throw new Error(errorData.detail || 'Chyba při zpracování dat')
      }

      const data = await response.json()
      onDataCalculated(data)
      onFormDataChange(formData)
    } catch (err: any) {
      setError(err.message)
      onDataCalculated(null)
      onFormDataChange(null)
    } finally {
      setLoading(false)
    }
  }

  const handleExport = async () => {
    setLoading(true)
    try {
      const response = await fetch(`${API_URL}/api/export/excel`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          username: formData.username,
          password: formData.password,
          start_date: formData.startDate,
          end_date: formData.endDate,
          start_km: parseInt(formData.startKm),
          end_km: parseInt(formData.endKm),
          vehicle_registration: formData.vehicleRegistration,
          variance: parseFloat(formData.variance)
        }),
      })

      if (!response.ok) throw new Error('Export failed')

      const blob = await response.blob()
      const url = window.URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = `journeybook_${formData.startDate}_${formData.endDate}.xlsx`
      a.click()
    } catch (err: any) {
      setError(err.message)
    } finally {
      setLoading(false)
    }
  }

  return (
    <Card className="bg-white/98 backdrop-blur-lg border-white/30">
      <CardHeader className="bg-gradient-to-r from-blue-50 to-blue-100 border-b border-blue-200">
        <CardTitle className="text-3xl font-bold text-gray-800 flex items-center gap-4">
          <div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center shadow-lg">
            <svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
            </svg>
          </div>
          <span>Vstupní údaje</span>
        </CardTitle>
      </CardHeader>
      <CardContent className="p-8">

      <form onSubmit={handleSubmit} className="space-y-5">
        <div className="space-y-2">
          <Label htmlFor="username">Uživatelské jméno</Label>
          <Input
            id="username"
            type="text"
            required
            value={formData.username}
            onChange={(e) => setFormData({ ...formData, username: e.target.value })}
            placeholder="Zadejte uživatelské jméno"
          />
        </div>

        <div className="space-y-2">
          <Label htmlFor="password">Heslo</Label>
          <Input
            id="password"
            type="password"
            required
            value={formData.password}
            onChange={(e) => setFormData({ ...formData, password: e.target.value })}
            placeholder="Zadejte heslo"
          />
        </div>

        <div className="grid grid-cols-2 gap-4">
          <div className="space-y-2">
            <Label htmlFor="startDate">Datum od</Label>
            <Input
              id="startDate"
              type="date"
              required
              value={formData.startDate}
              onChange={(e) => setFormData({ ...formData, startDate: e.target.value })}
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="endDate">Datum do</Label>
            <Input
              id="endDate"
              type="date"
              required
              value={formData.endDate}
              onChange={(e) => setFormData({ ...formData, endDate: e.target.value })}
            />
          </div>
        </div>

        <div className="grid grid-cols-2 gap-4">
          <div className="space-y-2">
            <Label htmlFor="startKm">Počáteční stav [km]</Label>
            <Input
              id="startKm"
              type="number"
              required
              value={formData.startKm}
              onChange={(e) => setFormData({ ...formData, startKm: e.target.value })}
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="endKm">Koncový stav [km]</Label>
            <Input
              id="endKm"
              type="number"
              required
              value={formData.endKm}
              onChange={(e) => setFormData({ ...formData, endKm: e.target.value })}
            />
          </div>
        </div>

        <div className="space-y-2">
          <Label htmlFor="vehicleRegistration">SPZ vozidla</Label>
          <Input
            id="vehicleRegistration"
            type="text"
            value={formData.vehicleRegistration}
            onChange={(e) => setFormData({ ...formData, vehicleRegistration: e.target.value })}
          />
        </div>

        <div className="space-y-2">
          <Label htmlFor="variance">Variance (0-1)</Label>
          <Input
            id="variance"
            type="number"
            step="0.01"
            min="0"
            max="1"
            value={formData.variance}
            onChange={(e) => setFormData({ ...formData, variance: e.target.value })}
          />
          <p className="text-xs text-muted-foreground">
            Náhodná variace rozdělení kilometrů (doporučeno 0.1 = 10%)
          </p>
        </div>

        {error && (
          <div className="bg-red-50 border-l-4 border-red-500 text-red-700 px-4 py-3 rounded-lg shadow-md flex items-start gap-3">
            <svg className="w-5 h-5 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
              <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
            </svg>
            <span>{error}</span>
          </div>
        )}

        <div className="flex flex-col sm:flex-row gap-4 pt-6">
          <Button
            type="submit"
            size="lg"
            className="flex-1 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-lg h-12"
          >
            <Calculator className="mr-2 h-5 w-5" />
            Vypočítat
          </Button>

          <Button
            type="button"
            onClick={handleExport}
            size="lg"
            className="flex-1 bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-lg h-12"
          >
            <Download className="mr-2 h-5 w-5" />
            Export Excel
          </Button>
        </div>
      </form>
      </CardContent>
    </Card>
  )
}