import { Button } from "@/registry/ui/button"
import { Input } from "@/registry/ui/input"
import { Label } from "@/registry/ui/label"
import { Select } from "@/registry/ui/select"
import { Separator } from "@/registry/ui/separator"
import { Switch } from "@/registry/ui/switch"
import { Textarea } from "@/registry/ui/textarea"

const toggles = [
  {
    name: "deploy-alerts",
    title: "Deploy notifications",
    body: "Post to the channel whenever a deploy starts, finishes or rolls back.",
    on: true,
  },
  {
    name: "weekly-digest",
    title: "Weekly digest",
    body: "One summary every Monday: traffic, errors, and anything near a limit.",
    on: true,
  },
  {
    name: "public-status",
    title: "Public status page",
    body: "Expose uptime and incidents at status.northwind.dev.",
    on: false,
  },
]

function Row({ children }) {
  return (
    <div className="grid gap-3 py-6 md:grid-cols-[14rem_1fr] md:gap-8">{children}</div>
  )
}

export default function AppSettings() {
  return (
    <section className="px-6 py-10">
      <div className="mx-auto max-w-3xl">
        <h1 className="text-2xl font-semibold tracking-tight">Project settings</h1>
        <p className="mt-2 text-sm text-muted">
          Applies to this project only. Workspace defaults live one level up.
        </p>

        <form className="mt-8 divide-y divide-border border-y border-border">
          <Row>
            <div>
              <Label htmlFor="settings-name">Project name</Label>
              <p className="mt-1 text-xs text-muted">
                Shown in the dashboard and in alerts.
              </p>
            </div>
            <Input id="settings-name" defaultValue="northwind-api" />
          </Row>

          <Row>
            <div>
              <Label htmlFor="settings-region">Primary region</Label>
              <p className="mt-1 text-xs text-muted">
                Writes go here. Reads are served from the closest replica.
              </p>
            </div>
            <Select id="settings-region" defaultValue="eu-west-1">
              <option value="us-east-1">us-east-1 · N. Virginia</option>
              <option value="eu-west-1">eu-west-1 · Ireland</option>
              <option value="ap-south-1">ap-south-1 · Mumbai</option>
            </Select>
          </Row>

          <Row>
            <div>
              <Label htmlFor="settings-description">Description</Label>
              <p className="mt-1 text-xs text-muted">
                Optional. Helps whoever joins the team next.
              </p>
            </div>
            <Textarea
              id="settings-description"
              rows={3}
              defaultValue="Public order and catalogue API. Owned by the platform team."
            />
          </Row>

          <Row>
            <div>
              <span className="text-sm font-medium">Notifications</span>
              <p className="mt-1 text-xs text-muted">
                Where this project talks to you.
              </p>
            </div>
            <div className="space-y-5">
              {toggles.map((toggle) => (
                <div key={toggle.name} className="flex items-start justify-between gap-6">
                  <div>
                    <p className="text-sm font-medium">{toggle.title}</p>
                    <p className="mt-1 text-xs leading-relaxed text-muted">
                      {toggle.body}
                    </p>
                  </div>
                  <Switch
                    name={toggle.name}
                    defaultChecked={toggle.on}
                    aria-label={toggle.title}
                  />
                </div>
              ))}
            </div>
          </Row>
        </form>

        <div className="mt-8 flex items-center justify-between gap-3">
          <p className="text-xs text-muted">Changes apply on save.</p>
          <div className="flex gap-2">
            <Button variant="ghost">Discard</Button>
            <Button>Save changes</Button>
          </div>
        </div>

        <Separator className="my-10" />

        <div className="rounded-lg border border-danger/40 p-5">
          <p className="text-sm font-medium">Delete this project</p>
          <p className="mt-1 text-xs leading-relaxed text-muted">
            The API stops answering immediately. Your database is untouched.
          </p>
          <Button variant="danger" size="sm" className="mt-4">
            Delete project
          </Button>
        </div>
      </div>
    </section>
  )
}