import { Field, PageHeader } from '../components/shared'
import { Icons } from '../components/shared/Icons'
import { Button } from '../components/ui'

export default function DomainPage() {
  return (
    <div>
      <PageHeader />

      {/* Panel container - full-bleed borders */}
      <div className="-mx-6 lg:-mx-10 mt-6">
        {/* Subdomain */}
        <div className="px-6 lg:px-10 py-5">
          <div className="text-xs font-medium text-muted uppercase tracking-wide">Subdomain</div>
          <div className="text-xs text-muted mt-0.5">Your default blog address</div>
        </div>
        <div className="px-6 lg:px-10 py-6 space-y-3">
          <div className="flex items-center gap-2">
            <input
              type="text"
              className="input flex-1"
              placeholder="myblog"
              defaultValue=""
            />
            <span className="text-sm text-muted">.writekit.dev</span>
          </div>
          <p className="text-xs text-muted">
            This is your default blog URL. You can also add a custom domain below.
          </p>
        </div>

        <div className="border-t border-border" />

        {/* Custom Domain */}
        <div className="px-6 lg:px-10 py-5">
          <div className="text-xs font-medium text-muted uppercase tracking-wide">Custom Domain</div>
          <div className="text-xs text-muted mt-0.5">Use your own domain for your blog</div>
        </div>
        <div className="px-6 lg:px-10 py-6 space-y-4">
          <Field
            label="Domain"
            value=""
            onChange={() => {}}
            placeholder="blog.example.com"
            hint="Enter your custom domain without https://"
          />
          <div className="p-4 bg-border/30 space-y-3">
            <h4 className="text-sm font-medium">DNS Configuration</h4>
            <p className="text-xs text-muted">
              Point your domain to our servers by adding these DNS records:
            </p>
            <div className="space-y-2 overflow-x-auto">
              <div className="flex items-center gap-4 p-2 bg-surface border border-border text-xs font-mono min-w-max">
                <span className="text-muted w-16">Type</span>
                <span className="text-muted w-24">Name</span>
                <span className="text-text">Value</span>
              </div>
              <div className="flex items-center gap-4 p-2 bg-surface border border-border text-xs font-mono min-w-max">
                <span className="w-16">CNAME</span>
                <span className="w-24">blog</span>
                <span>cname.writekit.dev</span>
              </div>
            </div>
          </div>
          <div className="flex flex-wrap items-center gap-4">
            <div className="flex items-center gap-2">
              <span className="w-2 h-2 rounded-full bg-warning" />
              <span className="text-sm text-muted">DNS: Pending</span>
            </div>
            <div className="flex items-center gap-2">
              <span className="w-2 h-2 rounded-full bg-muted" />
              <span className="text-sm text-muted">SSL: Not configured</span>
            </div>
          </div>
          <Button variant="secondary" Icon={Icons.Refresh}>
            Check DNS
          </Button>
        </div>
      </div>
    </div>
  )
}