"use client";

import { useState } from "react";
import { LogoUpload } from "@/components/brand/logo-upload";
import { DashboardLayout } from "@/components/layout/dashboard-layout";
import { OnboardingFooter } from "@/components/layout/onboarding-footer";
import { PageHeader } from "@/components/layout/page-header";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { InfoBanner } from "@/components/ui/info-banner";
import { Input } from "@/components/ui/input";
import { Select } from "@/components/ui/select";
import { BRAND_VOICES, INDUSTRY_OPTIONS } from "@/lib/constants";
import { useBrandStore } from "@/store/brand-store";
import { useProjectStore } from "@/store/project-store";

export default function BrandProfilePage() {
  const project = useProjectStore((s) => s.project);
  const { brand, setBrand, saveBrand } = useBrandStore();
  const [saved, setSaved] = useState(false);
  const [footerError, setFooterError] = useState("");

  const handleSave = () => {
    saveBrand();
    setSaved(true);
    setFooterError("");
    setTimeout(() => setSaved(false), 3000);
  };

  return (
    <DashboardLayout>
      <PageHeader
        title="Brand Profile"
        subtitle="Set brand identity, contact details, and upload your company logo"
      />
      <div className="flex-1 px-8 pb-24 pt-2">
        {footerError && (
          <p className="mb-4 text-sm font-medium text-red-600">{footerError}</p>
        )}

        <div className="grid gap-6 lg:grid-cols-[1.4fr_1fr]">
          <Card title="General">
            <div className="space-y-5">
              <Input
                label="Company Name"
                id="company-name"
                placeholder="Company name"
                value={brand.companyName || project.name}
                onChange={(e) => setBrand({ companyName: e.target.value })}
              />
              <Input
                label="Tagline"
                id="tagline"
                placeholder="Tagline"
                value={brand.tagline}
                onChange={(e) => setBrand({ tagline: e.target.value })}
              />
              <div className="grid gap-5 sm:grid-cols-2">
                <Select
                  label="Industry"
                  id="brand-industry"
                  options={INDUSTRY_OPTIONS}
                  value={brand.industry}
                  onChange={(e) => setBrand({ industry: e.target.value })}
                />
                <Select
                  label="Brand Voice"
                  id="brand-voice"
                  options={BRAND_VOICES}
                  value={brand.brandVoice}
                  onChange={(e) => setBrand({ brandVoice: e.target.value })}
                />
              </div>
              <div className="grid gap-5 sm:grid-cols-2">
                <Input
                  label="Contact Phone"
                  id="contact-phone"
                  placeholder="e.g. +1 (555) 123-4567"
                  value={brand.contactPhone ?? ""}
                  onChange={(e) => setBrand({ contactPhone: e.target.value })}
                />
                <Input
                  label="Contact Email"
                  id="contact-email"
                  type="email"
                  placeholder="e.g. sales@company.com"
                  value={brand.contactEmail ?? ""}
                  onChange={(e) => setBrand({ contactEmail: e.target.value })}
                />
              </div>
              <InfoBanner>
                Phone and email appear on story-based flyer creatives with your company
                website and services. Leave email blank until you are ready to show it —
                scraped contact details from your project website are used as fallback.
              </InfoBanner>
              <InfoBanner>
                Your brand voice helps AI create content aligned with your tone and
                messaging style. Used with project data — not a generic knowledge base.
              </InfoBanner>
              {saved && (
                <p className="text-sm font-medium text-green-700">Brand profile saved.</p>
              )}
              <div className="flex justify-end pt-2">
                <Button type="button" variant="teal" onClick={handleSave}>
                  Save Changes
                </Button>
              </div>
            </div>
          </Card>

          <Card title="Company Logo" subtitle="Recommended: 512×512px PNG or SVG">
            <LogoUpload
              logoDataUrl={brand.logoDataUrl ?? null}
              logoFileName={brand.logoFileName ?? null}
              onLogoChange={(data) => {
                setBrand(data);
                setSaved(false);
              }}
            />
          </Card>
        </div>
      </div>
      <OnboardingFooter
        currentStep={2}
        onBeforeNext={() => {
          const name = (brand.companyName || project.name).trim();
          if (!name) {
            setFooterError("Enter a company name before continuing.");
            return false;
          }
          saveBrand();
          setFooterError("");
          return true;
        }}
      />
    </DashboardLayout>
  );
}