"use client"

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

export default function FileSharingPage() {
  const router = useRouter()
  const [activeTab, setActiveTab] = useState<"samba" | "nfs">("samba")
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [success, setSuccess] = useState<string | null>(null)

  // Samba state
  const [sambaConfig, setSambaConfig] = useState<string>("")
  const [sambaConfigOriginal, setSambaConfigOriginal] = useState<string>("")
  const [sambaEditing, setSambaEditing] = useState(false)

  // NFS state
  const [nfsConfig, setNfsConfig] = useState<string>("")
  const [nfsConfigOriginal, setNfsConfigOriginal] = useState<string>("")
  const [nfsEditing, setNfsEditing] = useState(false)

  useEffect(() => {
    const token = localStorage.getItem("access_token")
    if (!token) {
      router.push("/login")
      return
    }
    loadConfigs()
  }, [router])

  const loadConfigs = async () => {
    try {
      setLoading(true)
      setError(null)

      const [samba, nfs] = await Promise.all([
        api.getSambaGlobalConfig().catch(() => ({})),
        api.getNfsGlobalConfig().catch(() => ({ exports: "" })),
      ])

      const sambaStr = typeof samba === "object" ? JSON.stringify(samba, null, 2) : String(samba)
      const nfsStr = nfs?.exports || ""

      setSambaConfig(sambaStr)
      setSambaConfigOriginal(sambaStr)
      setNfsConfig(nfsStr)
      setNfsConfigOriginal(nfsStr)
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to load configurations")
    } finally {
      setLoading(false)
    }
  }

  const handleSambaSave = async () => {
    try {
      setSaving(true)
      setError(null)
      setSuccess(null)

      await api.setSambaGlobalConfig(sambaConfig)
      setSambaConfigOriginal(sambaConfig)
      setSambaEditing(false)
      setSuccess("Samba configuration saved successfully")
      setTimeout(() => setSuccess(null), 3000)
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to save Samba configuration")
    } finally {
      setSaving(false)
    }
  }

  const handleNfsSave = async () => {
    try {
      setSaving(true)
      setError(null)
      setSuccess(null)

      await api.setNfsGlobalConfig(nfsConfig)
      setNfsConfigOriginal(nfsConfig)
      setNfsEditing(false)
      setSuccess("NFS configuration saved successfully")
      setTimeout(() => setSuccess(null), 3000)
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to save NFS configuration")
    } finally {
      setSaving(false)
    }
  }

  return (
    <div className="min-h-screen bg-background">
      <Header />

      <main className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="flex items-center justify-between mb-8">
          <div>
            <h1 className="text-3xl font-bold">File Sharing Configuration</h1>
            <p className="text-muted-foreground mt-1">Manage Samba (SMB) and NFS global settings</p>
          </div>
          <Button onClick={loadConfigs} disabled={loading} variant="outline">
            <RefreshCw className={`w-4 h-4 mr-2 ${loading ? "animate-spin" : ""}`} />
            Refresh
          </Button>
        </div>

        {/* Error Alert */}
        {error && (
          <div className="mb-6 flex items-center gap-3 rounded-md border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive">
            <AlertCircle className="w-4 h-4 flex-shrink-0" />
            {error}
          </div>
        )}

        {/* Success Alert */}
        {success && (
          <div className="mb-6 flex items-center gap-3 rounded-md border border-green-600/40 bg-green-500/10 px-4 py-3 text-sm text-green-600">
            ✓ {success}
          </div>
        )}

        {/* Tabs */}
        <div className="flex gap-2 mb-6 border-b border-border">
          <button
            onClick={() => setActiveTab("samba")}
            className={`px-4 py-3 font-medium border-b-2 transition-colors ${
              activeTab === "samba"
                ? "border-accent text-foreground"
                : "border-transparent text-muted-foreground hover:text-foreground"
            }`}
          >
            Samba (SMB) Configuration
          </button>
          <button
            onClick={() => setActiveTab("nfs")}
            className={`px-4 py-3 font-medium border-b-2 transition-colors ${
              activeTab === "nfs"
                ? "border-accent text-foreground"
                : "border-transparent text-muted-foreground hover:text-foreground"
            }`}
          >
            NFS Configuration
          </button>
        </div>

        {/* Samba Tab */}
        {activeTab === "samba" && (
          <Card>
            <CardHeader className="flex flex-row items-center justify-between">
              <CardTitle>Samba Global Configuration</CardTitle>
              <div className="flex gap-2">
                {sambaEditing && (
                  <Button
                    variant="outline"
                    onClick={() => {
                      setSambaConfig(sambaConfigOriginal)
                      setSambaEditing(false)
                    }}
                    disabled={saving}
                  >
                    Cancel
                  </Button>
                )}
                {sambaEditing ? (
                  <Button onClick={handleSambaSave} disabled={saving || sambaConfig === sambaConfigOriginal}>
                    {saving ? "Saving..." : "Save Changes"}
                  </Button>
                ) : (
                  <Button onClick={() => setSambaEditing(true)} variant="default">
                    Edit
                  </Button>
                )}
              </div>
            </CardHeader>
            <CardContent>
              {sambaEditing ? (
                <textarea
                  value={sambaConfig}
                  onChange={(e) => setSambaConfig(e.target.value)}
                  className="w-full h-96 p-3 font-mono text-sm bg-background border border-border rounded-md resize-none focus:outline-none focus:ring-2 focus:ring-ring"
                  disabled={saving}
                />
              ) : (
                <pre className="bg-muted p-4 rounded-md overflow-x-auto text-sm">
                  {sambaConfig || "No Samba configuration available"}
                </pre>
              )}
              <p className="text-xs text-muted-foreground mt-4">
                Edits will be applied to the [global] section of /etc/samba/smb.conf
              </p>
            </CardContent>
          </Card>
        )}

        {/* NFS Tab */}
        {activeTab === "nfs" && (
          <Card>
            <CardHeader className="flex flex-row items-center justify-between">
              <CardTitle>NFS Export Configuration</CardTitle>
              <div className="flex gap-2">
                {nfsEditing && (
                  <Button
                    variant="outline"
                    onClick={() => {
                      setNfsConfig(nfsConfigOriginal)
                      setNfsEditing(false)
                    }}
                    disabled={saving}
                  >
                    Cancel
                  </Button>
                )}
                {nfsEditing ? (
                  <Button onClick={handleNfsSave} disabled={saving || nfsConfig === nfsConfigOriginal}>
                    {saving ? "Saving..." : "Save Changes"}
                  </Button>
                ) : (
                  <Button onClick={() => setNfsEditing(true)} variant="default">
                    Edit
                  </Button>
                )}
              </div>
            </CardHeader>
            <CardContent>
              {nfsEditing ? (
                <textarea
                  value={nfsConfig}
                  onChange={(e) => setNfsConfig(e.target.value)}
                  className="w-full h-96 p-3 font-mono text-sm bg-background border border-border rounded-md resize-none focus:outline-none focus:ring-2 focus:ring-ring"
                  disabled={saving}
                />
              ) : (
                <pre className="bg-muted p-4 rounded-md overflow-x-auto text-sm">
                  {nfsConfig || "No NFS exports configured"}
                </pre>
              )}
              <p className="text-xs text-muted-foreground mt-4">
                Edits will be applied to /etc/exports. Format: path client(options)
              </p>
              <p className="text-xs text-muted-foreground mt-2">
                Example: /tank/share 192.168.1.0/24(rw,sync,no_subtree_check)
              </p>
            </CardContent>
          </Card>
        )}
      </main>
    </div>
  )
}