import { useParams, useNavigate } from 'react-router-dom'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { scstAPI, type SCSTTarget, type SCSTExtent } from '@/api/scst'
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { ArrowLeft, Plus, RefreshCw, HardDrive, Users, Trash2 } from 'lucide-react'
import { useState, useEffect } from 'react'

export default function ISCSITargetDetail() {
  const { id } = useParams<{ id: string }>()
  const navigate = useNavigate()
  const queryClient = useQueryClient()
  const [showAddLUN, setShowAddLUN] = useState(false)
  const [showAddInitiator, setShowAddInitiator] = useState(false)

  useEffect(() => {
    console.log('showAddLUN state:', showAddLUN)
  }, [showAddLUN])

  const { data, isLoading } = useQuery({
    queryKey: ['scst-target', id],
    queryFn: () => scstAPI.getTarget(id!),
    enabled: !!id,
  })

  const removeLUNMutation = useMutation({
    mutationFn: ({ targetId, lunId }: { targetId: string; lunId: string }) => 
      scstAPI.removeLUN(targetId, lunId),
    onMutate: async ({ lunId }) => {
      // Cancel any outgoing refetches
      await queryClient.cancelQueries({ queryKey: ['scst-target', id] })
      await queryClient.cancelQueries({ queryKey: ['scst-targets'] })

      // Snapshot the previous value
      const previousTarget = queryClient.getQueryData(['scst-target', id])
      const previousTargets = queryClient.getQueryData<SCSTTarget[]>(['scst-targets'])

      // Optimistically update to remove the LUN
      queryClient.setQueryData(['scst-target', id], (old: any) => {
        if (!old) return old
        return {
          ...old,
          luns: old.luns ? old.luns.filter((lun: any) => lun.id !== lunId) : []
        }
      })

      // Optimistically update LUN count in targets list
      queryClient.setQueryData<SCSTTarget[]>(['scst-targets'], (old) => {
        if (!old) return old
        return old.map(t => 
          t.id === id 
            ? { ...t, lun_count: Math.max(0, (t.lun_count || 0) - 1) }
            : t
        )
      })

      return { previousTarget, previousTargets }
    },
    onSuccess: () => {
      // Invalidate queries to refetch data from the server.
      // This is simpler and less prone to race conditions than the previous implementation.
      queryClient.invalidateQueries({ queryKey: ['scst-target', id] });
      queryClient.invalidateQueries({ queryKey: ['scst-targets'] });
    },
    onError: (error: any, _variables, context) => {
      // If 404, treat as success (LUN already deleted)
      if (error.response?.status === 404) {
        // LUN already deleted, just refresh to sync UI
        queryClient.invalidateQueries({ queryKey: ['scst-target', id] });
        queryClient.invalidateQueries({ queryKey: ['scst-targets'] });
        return
      }
      
      // Rollback optimistic update
      if (context?.previousTarget) {
        queryClient.setQueryData(['scst-target', id], context.previousTarget)
      }
      if (context?.previousTargets) {
        queryClient.setQueryData<SCSTTarget[]>(['scst-targets'], context.previousTargets)
      }
      
      alert(`Failed to remove LUN: ${error.response?.data?.error || error.message}`)
    },
  })

  if (isLoading) {
    return <div className="text-sm text-text-secondary min-h-screen bg-background-dark p-6">Loading target details...</div>
  }

  if (!data) {
    return <div className="text-sm text-red-400 min-h-screen bg-background-dark p-6">Target not found</div>
  }

  const { target, luns } = data
  // Ensure luns is always an array, not null
  const lunsArray = luns || []

  return (
    <div className="space-y-6 min-h-screen bg-background-dark p-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center space-x-4">
          <Button variant="ghost" size="sm" onClick={() => navigate('/iscsi')}>
            <ArrowLeft className="h-4 w-4 mr-2" />
            Back
          </Button>
          <div>
            <h1 className="text-3xl font-bold text-white font-mono text-lg">{target.iqn}</h1>
            {target.alias && (
              <p className="mt-1 text-sm text-text-secondary">{target.alias}</p>
            )}
          </div>
        </div>
        <Button
          variant="outline"
          onClick={() => {
            queryClient.invalidateQueries({ queryKey: ['scst-target', id] })
          }}
        >
          <RefreshCw className="h-4 w-4 mr-2" />
          Refresh
        </Button>
      </div>

      {/* Target Info */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Card>
          <CardHeader>
            <CardTitle className="text-sm font-medium">Target Status</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              <div className="flex justify-between">
                <span className="text-text-secondary">Status:</span>
                <span className={target.is_active ? 'text-green-400' : 'text-text-secondary'}>
                  {target.is_active ? 'Active' : 'Inactive'}
                </span>
              </div>
              <div className="flex justify-between">
                <span className="text-text-secondary">IQN:</span>
                <span className="font-mono text-xs text-white">{target.iqn}</span>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="text-sm font-medium">LUNs</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              <div className="flex justify-between">
                <span className="text-text-secondary">Total LUNs:</span>
                <span className="font-medium text-white">{lunsArray.length}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-text-secondary">Active:</span>
                <span className="font-medium text-white">
                  {lunsArray.filter((l) => l.is_active).length}
                </span>
              </div>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle className="text-sm font-medium">Actions</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-2">
              <Button
                variant="outline"
                size="sm"
                className="w-full"
                onClick={() => setShowAddLUN(true)}
              >
                <Plus className="h-4 w-4 mr-2" />
                Assign Extent
              </Button>
              <Button
                variant="outline"
                size="sm"
                className="w-full"
                onClick={() => setShowAddInitiator(true)}
              >
                <Users className="h-4 w-4 mr-2" />
                Add Initiator
              </Button>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* LUNs */}
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle>LUNs (Logical Unit Numbers)</CardTitle>
              <CardDescription>Storage devices exported by this target</CardDescription>
            </div>
            <Button 
              variant="outline" 
              size="sm" 
              onClick={(e) => {
                e.stopPropagation()
                setShowAddLUN(true)
              }}
            >
              <Plus className="h-4 w-4 mr-2" />
              Assign Extent
            </Button>
          </div>
        </CardHeader>
        <CardContent>
          {lunsArray.length > 0 ? (
            <div className="overflow-x-auto">
              <table className="min-w-full divide-y divide-gray-200">
                <thead className="bg-[#1a2632]">
                  <tr>
                    <th className="px-6 py-3 text-left text-xs font-medium text-text-secondary uppercase">
                      LUN #
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-text-secondary uppercase">
                      Handler
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-text-secondary uppercase">
                      Device Path
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-text-secondary uppercase">
                      Type
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-text-secondary uppercase">
                      Status
                    </th>
                    <th className="px-6 py-3 text-right text-xs font-medium text-text-secondary uppercase">
                      Actions
                    </th>
                  </tr>
                </thead>
                <tbody className="bg-card-dark divide-y divide-border-dark">
                  {lunsArray.map((lun) => (
                    <tr key={lun.id} className="hover:bg-[#233648]">
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-white">
                        {lun.lun_number}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-text-secondary">
                        {lun.handler}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-mono text-xs text-white">
                        {lun.device_path}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm text-text-secondary">
                        {lun.device_type}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <span
                          className={`px-2 py-1 text-xs font-medium rounded ${
                            lun.is_active
                              ? 'bg-green-100 text-green-800'
                              : 'bg-gray-100 text-gray-800'
                          }`}
                        >
                          {lun.is_active ? 'Active' : 'Inactive'}
                        </span>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-right text-sm">
                        <button
                          onClick={(e) => {
                            e.stopPropagation()
                            if (confirm(`Remove LUN ${lun.lun_number} from this target?`)) {
                              removeLUNMutation.mutate({ targetId: target.id, lunId: lun.id })
                            }
                          }}
                          disabled={removeLUNMutation.isPending}
                          className="p-1.5 hover:bg-red-500/10 rounded text-text-secondary hover:text-red-400 transition-colors disabled:opacity-50"
                          title="Remove LUN"
                        >
                          <Trash2 size={16} />
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          ) : (
            <div className="text-center py-8">
              <HardDrive className="h-12 w-12 text-gray-400 mx-auto mb-4" />
              <p className="text-sm text-text-secondary mb-4">No LUNs configured</p>
              <Button 
                variant="outline" 
                onClick={(e) => {
                  e.stopPropagation()
                  setShowAddLUN(true)
                }}
              >
                <Plus className="h-4 w-4 mr-2" />
                Assign First Extent
              </Button>
            </div>
          )}
        </CardContent>
      </Card>

      {/* Assign Extent Form */}
      {showAddLUN && (
        <AssignExtentForm
          targetId={target.id}
          onClose={() => setShowAddLUN(false)}
          onSuccess={async () => {
            setShowAddLUN(false)
            // Invalidate queries to refetch data.
            // Invalidate extents since one is now in use.
            queryClient.invalidateQueries({ queryKey: ['scst-target', id] });
            queryClient.invalidateQueries({ queryKey: ['scst-extents'] });
          }}
        />
      )}

      {/* Add Initiator Form */}
      {showAddInitiator && (
        <AddInitiatorForm
          targetId={target.id}
          onClose={() => setShowAddInitiator(false)}
          onSuccess={() => {
            setShowAddInitiator(false)
            queryClient.invalidateQueries({ queryKey: ['scst-target', id] })
          }}
        />
      )}
    </div>
  )
}

interface AssignExtentFormProps {
  targetId: string
  onClose: () => void
  onSuccess: () => Promise<void>
}

function AssignExtentForm({ targetId, onClose, onSuccess }: AssignExtentFormProps) {
  const [selectedExtent, setSelectedExtent] = useState('')
  const [lunNumber, setLunNumber] = useState(0)

  // Fetch available extents
  const { data: extents = [], isLoading: extentsLoading } = useQuery<SCSTExtent[]>({
    queryKey: ['scst-extents'],
    queryFn: scstAPI.listExtents,
    staleTime: 0,
    refetchOnMount: true,
  })

  // Filter only extents that are not in use
  const availableExtents = extents.filter(extent => !extent.is_in_use)

  const addLUNMutation = useMutation({
    mutationFn: (data: { device_name: string; device_path: string; lun_number: number; handler_type: string }) =>
      scstAPI.addLUN(targetId, data),
    onSuccess: async () => {
      await onSuccess()
    },
    onError: (error: any) => {
      const errorMessage = error.response?.data?.error || error.message || 'Failed to assign extent'
      alert(errorMessage)
    },
  })

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (!selectedExtent || lunNumber < 0) {
      alert('Please select an extent and specify LUN number')
      return
    }

    const extent = availableExtents.find(e => e.device_name === selectedExtent)
    if (!extent) {
      alert('Selected extent not found')
      return
    }

    addLUNMutation.mutate({
      device_name: extent.device_name,
      device_path: extent.device_path,
      handler_type: extent.handler_type,
      lun_number: lunNumber,
    })
  }

  return (
    <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
      <div className="bg-card-dark border border-border-dark rounded-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
        <div className="p-6 border-b border-border-dark">
          <h2 className="text-xl font-bold text-white">Assign Extent</h2>
          <p className="text-sm text-text-secondary mt-1">Assign an existing extent to this target as a LUN</p>
        </div>
        <form onSubmit={handleSubmit} className="p-6 space-y-4">
          <div>
            <label htmlFor="extent" className="block text-sm font-medium text-white mb-1">
              Available Extent *
            </label>
            {extentsLoading ? (
              <div className="w-full px-3 py-2 bg-[#0f161d] border border-border-dark rounded-lg text-text-secondary text-sm">
                Loading extents...
              </div>
            ) : availableExtents.length === 0 ? (
              <div className="w-full px-3 py-2 bg-[#0f161d] border border-border-dark rounded-lg text-text-secondary text-sm">
                No available extents. Please create an extent first in the Extents tab.
              </div>
            ) : (
              <select
                id="extent"
                value={selectedExtent}
                onChange={(e) => setSelectedExtent(e.target.value)}
                className="w-full px-3 py-2 bg-[#0f161d] border border-border-dark rounded-lg text-white text-sm focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary"
                required
              >
                <option value="">Select an extent...</option>
                {availableExtents.map((extent) => (
                  <option key={extent.device_name} value={extent.device_name}>
                    {extent.device_name} ({extent.handler_type}) - {extent.device_path}
                  </option>
                ))}
              </select>
            )}
            <p className="mt-1 text-xs text-text-secondary">
              Select an extent that has been created in the Extents tab
            </p>
          </div>

          {selectedExtent && (
            <div className="p-4 bg-[#0f161d] border border-border-dark rounded-lg">
              <p className="text-sm text-text-secondary mb-2">Extent Details:</p>
              {(() => {
                const extent = availableExtents.find(e => e.device_name === selectedExtent)
                if (!extent) return null
                return (
                  <div className="space-y-1 text-sm">
                    <div className="flex justify-between">
                      <span className="text-text-secondary">Device Name:</span>
                      <span className="text-white font-mono">{extent.device_name}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-text-secondary">Handler:</span>
                      <span className="text-white">{extent.handler_type}</span>
                    </div>
                    <div className="flex justify-between">
                      <span className="text-text-secondary">Path:</span>
                      <span className="text-white font-mono text-xs">{extent.device_path}</span>
                    </div>
                  </div>
                )
              })()}
            </div>
          )}

          <div>
            <label htmlFor="lunNumber" className="block text-sm font-medium text-white mb-1">
              LUN Number *
            </label>
            <input
              id="lunNumber"
              type="number"
              value={lunNumber}
              onChange={(e) => setLunNumber(parseInt(e.target.value) || 0)}
              min="0"
              max="255"
              className="w-full px-3 py-2 bg-[#0f161d] border border-border-dark rounded-lg text-white text-sm focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary"
              required
            />
            <p className="mt-1 text-xs text-text-secondary">
              Logical Unit Number (0-255, typically start from 0)
            </p>
          </div>

          <div className="flex justify-end gap-2 pt-4 border-t border-border-dark">
            <Button type="button" variant="outline" onClick={onClose}>
              Cancel
            </Button>
            <Button 
              type="submit" 
              disabled={addLUNMutation.isPending || availableExtents.length === 0}
            >
              {addLUNMutation.isPending ? 'Assigning...' : 'Assign Extent'}
            </Button>
          </div>
        </form>
      </div>
    </div>
  )
}

interface AddInitiatorFormProps {
  targetId: string
  onClose: () => void
  onSuccess: () => void
}

function AddInitiatorForm({ targetId, onClose, onSuccess }: AddInitiatorFormProps) {
  const [iqn, setIqn] = useState('')

  const addInitiatorMutation = useMutation({
    mutationFn: (data: { initiator_iqn: string }) =>
      scstAPI.addInitiator(targetId, data),
    onSuccess: () => {
      onSuccess()
    },
  })

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (!iqn) {
      alert('Initiator IQN is required')
      return
    }

    addInitiatorMutation.mutate({
      initiator_iqn: iqn.trim(),
    })
  }

  return (
    <Card>
      <CardHeader>
        <CardTitle>Add Initiator</CardTitle>
        <CardDescription>Allow an iSCSI initiator to access this target</CardDescription>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label htmlFor="initiatorIqn" className="block text-sm font-medium text-gray-700 mb-1">
              Initiator IQN *
            </label>
            <input
              id="initiatorIqn"
              type="text"
              value={iqn}
              onChange={(e) => setIqn(e.target.value)}
              placeholder="iqn.2024-01.com.client:initiator1"
              className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 font-mono text-sm"
              required
            />
            <p className="mt-1 text-xs text-text-secondary">
              Format: iqn.YYYY-MM.reverse.domain:identifier
            </p>
          </div>

          <div className="flex justify-end gap-2">
            <Button type="button" variant="outline" onClick={onClose}>
              Cancel
            </Button>
            <Button type="submit" disabled={addInitiatorMutation.isPending}>
              {addInitiatorMutation.isPending ? 'Adding...' : 'Add Initiator'}
            </Button>
          </div>
        </form>
      </CardContent>
    </Card>
  )
}