import { useState, useMemo } from "react"
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
import { api } from "../lib/api"
import { EmptyState } from "../components/EmptyState"
import { LoadingSpinner } from "../components/LoadingSpinner"
import type { TimeEntryInsert } from "@emberclone/shared"

export default function TimeEntries() {
  const queryClient = useQueryClient()
  
  const [formData, setFormData] = useState({
    description: "",
    startTime: "",
    endTime: "",
    projectId: ""
  })

  const [filters, setFilters] = useState({
    search: "",
    from: "",
    to: ""
  })

  const [selectedIds, setSelectedIds] = useState<string[]>([])

  const { data: entries, isLoading, isError } = useQuery({
    queryKey: ["time-entries", filters.from, filters.to],
    queryFn: () => api.listTimeEntries({ 
      from: filters.from || undefined, 
      to: filters.to || undefined 
    })
  })

  const createMutation = useMutation({
    mutationFn: (data: Partial<TimeEntryInsert>) => api.createTimeEntry(data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["time-entries"] })
      setFormData({ description: "", startTime: "", endTime: "", projectId: "" })
    }
  })

  const deleteMutation = useMutation({
    mutationFn: (id: string) => api.deleteTimeEntry(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["time-entries"] })
    }
  })

  const bulkDeleteMutation = useMutation({
    mutationFn: (ids: string[]) => api.bulkDeleteTimeEntries(ids),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["time-entries"] })
      setSelectedIds([])
    }
  })

  const filteredEntries = useMemo(() => {
    if (!entries) return []
    return entries.filter(entry => 
      entry.description?.toLowerCase().includes(filters.search.toLowerCase())
    )
  }, [entries, filters.search])

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    createMutation.mutate({
      description: formData.description,
      startTime: new Date(formData.startTime) as any,
      endTime: new Date(formData.endTime) as any,
      projectId: formData.projectId || undefined
    })
  }

  const handleExport = () => {
    const params = new URLSearchParams()
    if (filters.from) params.append("from", filters.from)
    if (filters.to) params.append("to", filters.to)
    window.location.href = `/api/time-entries/export.csv?${params.toString()}`
  }

  const toggleSelectAll = () => {
    if (selectedIds.length === filteredEntries.length) {
      setSelectedIds([])
    } else {
      setSelectedIds(filteredEntries.map(e => e.id))
    }
  }

  const toggleSelect = (id: string) => {
    setSelectedIds(prev => 
      prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id]
    )
  }

  if (isError) return <div className="p-6 text-red-500">Error loading time entries.</div>

  return (
    <div className="p-6 max-w-6xl mx-auto space-y-8">
      <header>
        <h1 className="text-2xl font-bold text-gray-900">Time Tracking</h1>
        <p className="text-gray-500">Manage your work logs and project hours</p>
      </header>

      <section className="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
        <h2 className="text-lg font-semibold mb-4">Log New Entry</h2>
        <form onSubmit={handleSubmit} className="grid grid-cols-1 md:grid-cols-4 gap-4">
          <div className="md:col-span-1">
            <label className="block text-sm font-medium text-gray-700 mb-1">Description</label>
            <input
              type="text"
              required
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none"
              value={formData.description}
              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
              placeholder="What did you work on?"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Start</label>
            <input
              type="datetime-local"
              required
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none"
              value={formData.startTime}
              onChange={(e) => setFormData({ ...formData, startTime: e.target.value })}
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">End</label>
            <input
              type="datetime-local"
              required
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none"
              value={formData.endTime}
              onChange={(e) => setFormData({ ...formData, endTime: e.target.value })}
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Project ID</label>
            <input
              type="text"
              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 outline-none"
              value={formData.projectId}
              onChange={(e) => setFormData({ ...formData, projectId: e.target.value })}
              placeholder="Optional"
            />
          </div>
          <div className="md:col-span-4 flex justify-end">
            <button 
              type="submit" 
              disabled={createMutation.isPending}
              className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 transition-colors"
            >
              {createMutation.isPending ? "Saving..." : "Add Entry"}
            </button>
          </div>
        </form>
      </section>

      <section className="space-y-4">
        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
          <div className="flex flex-wrap gap-3">
            <input
              type="text"
              placeholder="Search descriptions..."
              className="px-3 py-2 border border-gray-300 rounded-md text-sm outline-none focus:ring-2 focus:ring-blue-500"
              value={filters.search}
              onChange={(e) => setFilters({ ...filters, search: e.target.value })}
            />
            <input
              type="date"
              className="px-3 py-2 border border-gray-300 rounded-md text-sm outline-none focus:ring-2 focus:ring-blue-500"
              value={filters.from}
              onChange={(e) => setFilters({ ...filters, from: e.target.value })}
            />
            <input
              type="date"
              className="px-3 py-2 border border-gray-300 rounded-md text-sm outline-none focus:ring-2 focus:ring-blue-500"
              value={filters.to}
              onChange={(e) => setFilters({ ...filters, to: e.target.value })}
            />
          </div>
          <button 
            onClick={handleExport}
            className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors"
          >
            Export CSV
          </button>
        </div>

        {selectedIds.length > 0 && (
          <div className="flex items-center justify-between p-3 bg-blue-50 border border-blue-200 rounded-lg animate-in fade-in slide-in-from-top-2">
            <span className="text-sm font-medium text-blue-800">
              {selectedIds.length} entries selected
            </span>
            <button 
              onClick={() => bulkDeleteMutation.mutate(selectedIds)}
              disabled={bulkDeleteMutation.isPending}
              className="px-3 py-1.5 text-sm font-medium text-white bg-red-600 rounded-md hover:bg-red-700 disabled:opacity-50 transition-colors"
            >
              {bulkDeleteMutation.isPending ? "Deleting..." : `Delete (${selectedIds.length})`}
            </button>
          </div>
        )}

        {isLoading ? (
          <div className="flex justify-center py-12"><LoadingSpinner /></div>
        ) : filteredEntries.length === 0 ? (
          <EmptyState message="No time entries found matching your filters." />
        ) : (
          <div className="overflow-x-auto border border-gray-200 rounded-lg shadow-sm">
            <table className="w-full text-left text-sm">
              <thead className="bg-gray-50 border-b border-gray-200 text-gray-600 font-medium">
                <tr>
                  <th className="px-4 py-3 w-10">
                    <input 
                      type="checkbox" 
                      className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                      checked={selectedIds.length === filteredEntries.length && filteredEntries.length > 0}
                      onChange={toggleSelectAll}
                    />
                  </th>
                  <th className="px-4 py-3">Description</th>
                  <th className="px-4 py-3">Start</th>
                  <th className="px-4 py-3">End</th>
                  <th className="px-4 py-3">Duration</th>
                  <th className="px-4 py-3 text-right">Actions</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-gray-200 bg-white">
                {filteredEntries.map((entry) => {
                  const durationMs = new Date(entry.endTime).getTime() - new Date(entry.startTime).getTime()
                  const durationHrs = (durationMs / (1000 * 60 * 60)).toFixed(2)

                  return (
                    <tr key={entry.id} className={`hover:bg-gray-50 transition-colors ${selectedIds.includes(entry.id) ? 'bg-blue-50/50' : ''}`}>
                      <td className="px-4 py-3">
                        <input 
                          type="checkbox" 
                          className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                          checked={selectedIds.includes(entry.id)}
                          onChange={() => toggleSelect(entry.id)}
                        />
                      </td>
                      <td className="px-4 py-3 font-medium text-gray-900">{entry.description}</td>
                      <td className="px-4 py-3 text-gray-500">{new Date(entry.startTime).toLocaleString()}</td>
                      <td className="px-4 py-3 text-gray-500">{new Date(entry.endTime).toLocaleString()}</td>
                      <td className="px-4 py-3 text-gray-500">{durationHrs}h</td>
                      <td className="px-4 py-3 text-right">
                        <button 
                          onClick={() => deleteMutation.mutate(entry.id)}
                          className="text-red-600 hover:text-red-800 font-medium"
                        >
                          Delete
                        </button>
                      </td>
                    </tr>
                  )
                })}
              </tbody>
            </table>
          </div>
        )}
      </section>
    </div>
  )
}