"use client"

import { useState } from "react"
import { api } from "@/lib/api"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { AlertCircle } from "lucide-react"

interface CreateSambaDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onCreated: (share: any) => void
}

export default function CreateSambaDialog({
  open,
  onOpenChange,
  onCreated,
}: CreateSambaDialogProps) {
  const [name, setName] = useState("")
  const [path, setPath] = useState("")
  const [comment, setComment] = useState("")
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState("")

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError("")

    if (!name.trim()) {
      setError("Share name is required")
      return
    }
    if (!path.trim()) {
      setError("Path is required")
      return
    }

    try {
      setLoading(true)
      await api.createSambaShare({ name, path, comment: comment || undefined })

      // Return the created share
      onCreated({
        name,
        path,
        comment: comment || null,
        valid_users: null,
        read_only: false,
      })

      // Reset form
      setName("")
      setPath("")
      setComment("")
      onOpenChange(false)
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to create share")
    } finally {
      setLoading(false)
    }
  }

  if (!open) return null

  return (
    <div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4">
      <Card className="w-full max-w-md">
        <CardHeader>
          <CardTitle>Create Samba Share</CardTitle>
        </CardHeader>
        <form onSubmit={handleSubmit}>
          <CardContent className="space-y-4">
            {error && (
              <div className="bg-red-50 border border-red-200 rounded p-3 flex gap-2">
                <AlertCircle className="w-4 h-4 text-red-600 flex-shrink-0 mt-0.5" />
                <p className="text-sm text-red-800">{error}</p>
              </div>
            )}

            <div>
              <label className="block text-sm font-medium mb-1">Share Name</label>
              <input
                type="text"
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="e.g., share, media, backup"
                className="w-full px-3 py-2 border border-border rounded bg-background text-sm"
                disabled={loading}
              />
              <p className="text-xs text-muted-foreground mt-1">
                Alphanumeric, max 15 characters
              </p>
            </div>

            <div>
              <label className="block text-sm font-medium mb-1">Path</label>
              <input
                type="text"
                value={path}
                onChange={(e) => setPath(e.target.value)}
                placeholder="e.g., /tank/share"
                className="w-full px-3 py-2 border border-border rounded bg-background text-sm"
                disabled={loading}
              />
              <p className="text-xs text-muted-foreground mt-1">
                Must be an existing filesystem path
              </p>
            </div>

            <div>
              <label className="block text-sm font-medium mb-1">Description (optional)</label>
              <input
                type="text"
                value={comment}
                onChange={(e) => setComment(e.target.value)}
                placeholder="Share description"
                className="w-full px-3 py-2 border border-border rounded bg-background text-sm"
                disabled={loading}
              />
            </div>

            <div className="bg-blue-50 border border-blue-200 rounded p-3">
              <p className="text-xs text-blue-800">
                <strong>Default permissions:</strong> Read/Write, authenticated users only
              </p>
            </div>

            <div className="flex gap-3 justify-end pt-4">
              <Button
                type="button"
                variant="outline"
                onClick={() => onOpenChange(false)}
                disabled={loading}
              >
                Cancel
              </Button>
              <Button type="submit" disabled={loading}>
                {loading ? "Creating..." : "Create Share"}
              </Button>
            </div>
          </CardContent>
        </form>
      </Card>
    </div>
  )
}