'use client'

import { useState, useMemo } from 'react'
import { createClient } from '@/lib/supabase/client'
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 {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import { ArrowLeftRight, Loader2, History } from 'lucide-react'
import { toast } from 'sonner'
import type { MaterialTransfer } from '@/lib/supabase/types'

type Branch = { id: string; name: string }
type Material = { id: string; name: string; unit: string }
type StockRow = { id: string; branch_id: string; material_id: string; current_stock: number }

export function TransfersClient({
  orgId,
  branches,
  materials,
  allStock: initialStock,
  initialTransfers,
}: {
  orgId: string
  branches: Branch[]
  materials: Material[]
  allStock: StockRow[]
  initialTransfers: MaterialTransfer[]
}) {
  const [allStock, setAllStock] = useState(initialStock)
  const [transfers, setTransfers] = useState(initialTransfers)
  const [fromBranchId, setFromBranchId] = useState<string>('')
  const [materialId, setMaterialId] = useState<string>('')
  const [toBranchId, setToBranchId] = useState<string>('')
  const [amount, setAmount] = useState('')
  const [note, setNote] = useState('')
  const [saving, setSaving] = useState(false)

  const supabase = createClient()

  // Materials available in from-branch (with current stock)
  const fromBranchStock = useMemo(() =>
    allStock.filter(s => s.branch_id === fromBranchId && s.current_stock > 0),
    [allStock, fromBranchId]
  )

  const availableMaterials = useMemo(() =>
    materials.filter(m => fromBranchStock.some(s => s.material_id === m.id)),
    [materials, fromBranchStock]
  )

  const selectedStock = useMemo(() =>
    allStock.find(s => s.branch_id === fromBranchId && s.material_id === materialId),
    [allStock, fromBranchId, materialId]
  )

  const selectedMaterial = materials.find(m => m.id === materialId)

  const toBranches = branches.filter(b => b.id !== fromBranchId)

  function handleFromBranchChange(v: string | null) {
    if (!v) return
    setFromBranchId(v)
    setMaterialId('')
    setToBranchId('')
  }

  function handleMaterialChange(v: string | null) {
    if (!v) return
    setMaterialId(v)
  }

  async function handleTransfer() {
    if (!fromBranchId || !materialId || !toBranchId || !amount) {
      toast.error('Бүх талбарыг бөглөнө үү')
      return
    }
    const amountNum = Number(amount)
    if (amountNum <= 0) { toast.error('Хэмжээ 0-ээс их байх ёстой'); return }
    if (!selectedStock || selectedStock.current_stock < amountNum) {
      toast.error(`Нөөц хүрэхгүй байна. Одоогийн нөөц: ${selectedStock?.current_stock ?? 0} ${selectedMaterial?.unit ?? ''}`)
      return
    }

    setSaving(true)

    // Deduct from source branch
    const newFromStock = selectedStock.current_stock - amountNum
    const { error: e1 } = await supabase
      .from('branch_stock')
      .update({ current_stock: newFromStock })
      .eq('id', selectedStock.id)
    if (e1) { toast.error(e1.message); setSaving(false); return }

    // Add to destination branch (upsert in case entry doesn't exist)
    const toStockRow = allStock.find(s => s.branch_id === toBranchId && s.material_id === materialId)
    const newToStock = (toStockRow?.current_stock ?? 0) + amountNum
    const { data: upsertedStock, error: e2 } = await supabase
      .from('branch_stock')
      .upsert(
        { branch_id: toBranchId, material_id: materialId, current_stock: newToStock },
        { onConflict: 'branch_id,material_id' }
      )
      .select()
      .single()
    if (e2) { toast.error(e2.message); setSaving(false); return }

    // Log the transfer
    const { data: transfer, error: e3 } = await supabase
      .from('material_transfers')
      .insert({
        org_id: orgId,
        from_branch_id: fromBranchId,
        to_branch_id: toBranchId,
        material_id: materialId,
        amount: amountNum,
        note: note.trim() || null,
      })
      .select()
      .single()
    if (e3) { toast.error(e3.message); setSaving(false); return }

    // Update local stock state
    setAllStock(prev => prev.map(s => {
      if (s.id === selectedStock.id) return { ...s, current_stock: newFromStock }
      if (toStockRow && s.id === toStockRow.id) return { ...s, current_stock: newToStock }
      return s
    }).concat(
      !toStockRow && upsertedStock ? [upsertedStock] : []
    ))

    setTransfers(prev => [transfer, ...prev])
    setAmount('')
    setNote('')
    toast.success('Шилжүүлэг амжилттай хийгдлээ')
    setSaving(false)
  }

  const branchName = (id: string) => branches.find(b => b.id === id)?.name ?? id
  const matInfo = (id: string) => materials.find(m => m.id === id)

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-gray-900">Шилжүүлэг</h1>
        <p className="text-gray-500 text-sm mt-1">Салбар хоорондын түүхий эдийн шилжүүлэг</p>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Transfer form */}
        <Card>
          <CardHeader>
            <CardTitle className="text-base flex items-center gap-2">
              <ArrowLeftRight className="h-4 w-4" />
              Шинэ шилжүүлэг
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-1.5">
              <Label>Гаргах салбар</Label>
              <Select value={fromBranchId} onValueChange={handleFromBranchChange}>
                <SelectTrigger>
                  <SelectValue placeholder="Салбар сонгох..." />
                </SelectTrigger>
                <SelectContent>
                  {branches.map(b => (
                    <SelectItem key={b.id} value={b.id}>{b.name}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            <div className="space-y-1.5">
              <Label>Түүхий эд</Label>
              <Select
                value={materialId}
                onValueChange={handleMaterialChange}
                disabled={!fromBranchId}
              >
                <SelectTrigger>
                  <SelectValue placeholder={fromBranchId ? 'Материал сонгох...' : 'Эхлээд салбар сонгоно уу'} />
                </SelectTrigger>
                <SelectContent>
                  {availableMaterials.length === 0 ? (
                    <SelectItem value="_empty" disabled>Нөөц байхгүй</SelectItem>
                  ) : (
                    availableMaterials.map(m => {
                      const stock = fromBranchStock.find(s => s.material_id === m.id)
                      return (
                        <SelectItem key={m.id} value={m.id}>
                          {m.name} — {stock?.current_stock ?? 0} {m.unit}
                        </SelectItem>
                      )
                    })
                  )}
                </SelectContent>
              </Select>
            </div>

            <div className="space-y-1.5">
              <Label>Хүлээн авах салбар</Label>
              <Select
                value={toBranchId}
                onValueChange={v => v && setToBranchId(v)}
                disabled={!fromBranchId}
              >
                <SelectTrigger>
                  <SelectValue placeholder="Салбар сонгох..." />
                </SelectTrigger>
                <SelectContent>
                  {toBranches.map(b => (
                    <SelectItem key={b.id} value={b.id}>{b.name}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            <div className="space-y-1.5">
              <Label>
                Хэмжээ
                {selectedStock && selectedMaterial && (
                  <span className="text-xs text-gray-400 ml-2">
                    (Боломжтой: {selectedStock.current_stock} {selectedMaterial.unit})
                  </span>
                )}
              </Label>
              <Input
                type="number"
                placeholder="0"
                value={amount}
                onChange={e => setAmount(e.target.value)}
                disabled={!materialId}
              />
            </div>

            <div className="space-y-1.5">
              <Label>Тэмдэглэл (заавал биш)</Label>
              <Input
                placeholder="Жишээ: Яаралтай хэрэгцээ"
                value={note}
                onChange={e => setNote(e.target.value)}
              />
            </div>

            <Button
              className="w-full bg-amber-600 hover:bg-amber-700"
              onClick={handleTransfer}
              disabled={saving || !fromBranchId || !materialId || !toBranchId || !amount}
            >
              {saving ? (
                <Loader2 className="h-4 w-4 animate-spin mr-2" />
              ) : (
                <ArrowLeftRight className="h-4 w-4 mr-2" />
              )}
              Шилжүүлэх
            </Button>
          </CardContent>
        </Card>

        {/* Stock overview */}
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Салбарын нөөцийн тойм</CardTitle>
          </CardHeader>
          <CardContent>
            {fromBranchId ? (
              <div className="space-y-2">
                {materials.map(m => {
                  const stock = allStock.find(s => s.branch_id === fromBranchId && s.material_id === m.id)
                  return (
                    <div key={m.id} className="flex justify-between text-sm py-1 border-b border-gray-50 last:border-0">
                      <span className="text-gray-700">{m.name}</span>
                      <span className={`font-medium ${(stock?.current_stock ?? 0) > 0 ? 'text-gray-900' : 'text-gray-300'}`}>
                        {stock?.current_stock ?? 0} {m.unit}
                      </span>
                    </div>
                  )
                })}
              </div>
            ) : (
              <p className="text-sm text-gray-400 text-center py-8">Салбар сонгоно уу</p>
            )}
          </CardContent>
        </Card>
      </div>

      {/* Transfer history */}
      <Card>
        <CardHeader>
          <CardTitle className="text-base flex items-center gap-2">
            <History className="h-4 w-4" />
            Шилжүүлэлтийн түүх
          </CardTitle>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow className="bg-gray-50">
                <TableHead>Огноо</TableHead>
                <TableHead>Гаргах салбар</TableHead>
                <TableHead>Материал</TableHead>
                <TableHead className="text-right">Хэмжээ</TableHead>
                <TableHead>Хүлээн авах</TableHead>
                <TableHead>Тэмдэглэл</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {transfers.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={6} className="text-center py-8 text-gray-400">
                    Шилжүүлэлт байхгүй байна
                  </TableCell>
                </TableRow>
              ) : (
                transfers.map(t => {
                  const mat = matInfo(t.material_id)
                  return (
                    <TableRow key={t.id}>
                      <TableCell className="text-sm text-gray-500">
                        {new Date(t.created_at).toLocaleString('mn-MN', {
                          month: 'short', day: 'numeric',
                          hour: '2-digit', minute: '2-digit',
                        })}
                      </TableCell>
                      <TableCell className="text-sm font-medium">{branchName(t.from_branch_id)}</TableCell>
                      <TableCell className="text-sm">{mat?.name ?? t.material_id}</TableCell>
                      <TableCell className="text-right text-sm font-medium text-amber-700">
                        {t.amount} {mat?.unit ?? ''}
                      </TableCell>
                      <TableCell className="text-sm font-medium">{branchName(t.to_branch_id)}</TableCell>
                      <TableCell className="text-sm text-gray-400">{t.note ?? '—'}</TableCell>
                    </TableRow>
                  )
                })
              )}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </div>
  )
}