'use client'

import { useState } 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 {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from '@/components/ui/dialog'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import { Plus, Pencil, Trash2, GitBranch, Loader2 } from 'lucide-react'
import { toast } from 'sonner'
import type { Branch } from '@/lib/supabase/types'

export function BranchesClient({
  orgId,
  initialBranches,
}: {
  orgId: string
  initialBranches: Branch[]
}) {
  const [branches, setBranches] = useState(initialBranches)
  const [open, setOpen] = useState(false)
  const [name, setName] = useState('')
  const [editing, setEditing] = useState<string | null>(null)
  const [saving, setSaving] = useState(false)

  const supabase = createClient()

  function openNew() {
    setEditing(null)
    setName('')
    setOpen(true)
  }

  function openEdit(b: Branch) {
    setEditing(b.id)
    setName(b.name)
    setOpen(true)
  }

  async function handleSave() {
    if (!name.trim()) { toast.error('Нэр оруулна уу'); return }
    setSaving(true)

    if (editing) {
      const { data, error } = await supabase
        .from('branches')
        .update({ name: name.trim() })
        .eq('id', editing)
        .select()
        .single()
      if (error) { toast.error(error.message); setSaving(false); return }
      setBranches(prev => prev.map(b => b.id === editing ? data : b))
      toast.success('Салбар шинэчлэгдлээ')
    } else {
      const { data: newBranch, error } = await supabase
        .from('branches')
        .insert({ org_id: orgId, name: name.trim() })
        .select()
        .single()
      if (error) { toast.error(error.message); setSaving(false); return }

      // Create branch_stock rows (current_stock = 0) for all existing materials
      const { data: materials } = await supabase
        .from('raw_materials')
        .select('id')
        .eq('org_id', orgId)

      if (materials && materials.length > 0) {
        const { error: stockErr } = await supabase.from('branch_stock').insert(
          materials.map(m => ({
            branch_id: newBranch.id,
            material_id: m.id,
            current_stock: 0,
            min_stock: 0,
          }))
        )
        if (stockErr) toast.error('Нөөц үүсгэхэд алдаа гарлаа: ' + stockErr.message)
      }

      setBranches(prev => [...prev, newBranch])
      toast.success('Салбар нэмэгдлээ')
    }

    setSaving(false)
    setOpen(false)
  }

  async function handleDelete(id: string) {
    if (branches.length <= 1) {
      toast.error('Хамгийн багадаа 1 салбар байх ёстой')
      return
    }
    if (!confirm('Энэ салбарыг устгах уу? Холбоотой бүх нөөц, борлуулалтын мэдээлэл устана.')) return
    const { error } = await supabase.from('branches').delete().eq('id', id)
    if (error) { toast.error(error.message); return }
    setBranches(prev => prev.filter(b => b.id !== id))
    toast.success('Устгагдлаа')
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Салбарууд</h1>
          <p className="text-gray-500 text-sm mt-1">Нийт {branches.length} салбар</p>
        </div>
        <Button onClick={openNew} className="bg-amber-600 hover:bg-amber-700">
          <Plus className="h-4 w-4 mr-2" /> Салбар нэмэх
        </Button>
      </div>

      <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
        <Table>
          <TableHeader>
            <TableRow className="bg-gray-50">
              <TableHead>Нэр</TableHead>
              <TableHead>Огноо</TableHead>
              <TableHead className="text-right">Үйлдэл</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {branches.length === 0 ? (
              <TableRow>
                <TableCell colSpan={3} className="text-center py-12 text-gray-400">
                  <GitBranch className="h-10 w-10 mx-auto mb-2 opacity-30" />
                  Салбар байхгүй байна
                </TableCell>
              </TableRow>
            ) : (
              branches.map(b => (
                <TableRow key={b.id} className="hover:bg-gray-50">
                  <TableCell className="font-medium flex items-center gap-2">
                    <GitBranch className="h-4 w-4 text-amber-500" />
                    {b.name}
                  </TableCell>
                  <TableCell className="text-gray-400 text-sm">
                    {new Date(b.created_at).toLocaleDateString('mn-MN')}
                  </TableCell>
                  <TableCell className="text-right">
                    <div className="flex gap-1 justify-end">
                      <Button variant="ghost" size="sm" onClick={() => openEdit(b)}>
                        <Pencil className="h-4 w-4" />
                      </Button>
                      <Button
                        variant="ghost"
                        size="sm"
                        className="text-red-500 hover:text-red-700 hover:bg-red-50"
                        onClick={() => handleDelete(b.id)}
                        disabled={branches.length <= 1}
                      >
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>

      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent className="max-w-sm">
          <DialogHeader>
            <DialogTitle>{editing ? 'Салбар засах' : 'Шинэ салбар нэмэх'}</DialogTitle>
          </DialogHeader>
          <div className="space-y-3 py-2">
            <div className="space-y-1.5">
              <Label>Салбарын нэр</Label>
              <Input
                placeholder="Жишээ: Төв салбар"
                value={name}
                onChange={e => setName(e.target.value)}
                onKeyDown={e => e.key === 'Enter' && handleSave()}
              />
            </div>
          </div>
          <DialogFooter>
            <Button variant="outline" onClick={() => setOpen(false)}>Цуцлах</Button>
            <Button
              className="bg-amber-600 hover:bg-amber-700"
              onClick={handleSave}
              disabled={saving}
            >
              {saving ? <Loader2 className="h-4 w-4 animate-spin mr-2" /> : null}
              Хадгалах
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}